JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
  <article>
    <div>
    
      <!-- The masked image -->
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
			<defs>
				<clipPath id="circle">
					<circle cx="50" cy="50" r="35"/>
				</clipPath>
			</defs>
			<image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/Nxy-6QwGMzA/300x350" clip-path="url(#circle)"/>
		</svg>
    </div>
    
    <!-- The full revealed image -->
    <img class="img-full" src="https://source.unsplash.com/Nxy-6QwGMzA/300x350" alt="">
    
    <!-- The circle ring -->
    <svg viewBox="0 0 100 100" class="circle-ring">
        <circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
    </svg>
    
    <div class="text">
      <h2>Article Title</h2>
      <h4>Article Subtitle</h4>
    </div>
  </article>
</a>

CSS

a {
  display: inline-block;
}

article {
  position: relative;
  border: 1px solid lightgrey;
  width: 300px;
  height: 350px;
  /* prevent scaled circle ring from triggering hover */
  overflow: hidden;
}


/* create the colour overlay */
article:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: rgba(0, 255, 255, .2);
  z-index: 3;
}


/* place full image above SVG */
.img-full {
  position: absolute;
  top: 0;
  z-index: 2;
  /* hide the full image initially */
  display: none;
}

.circle-ring {
  position: absolute;
  top: 0;
  z-index: 3;
  /* initially hidden with opacity so it can be animated */
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform .3s ease, opacity .4s ease;
}

a:hover .img-full,
a:hover article:after {
  display: block;
}

a:hover .circle-ring {
  opacity: 1;
  transform: scale(1);
}

.text {
  position: absolute;
  bottom: 0;
  padding: 1rem 2rem;
  color: #000;
  /* keep text above SVG, full image and overlay */
  z-index: 4;
}

a:hover .text {
  color: #FFF;
}


/* general */
h2,
h4 {
  margin: 0;
  font-family: sans-serif;
}

h4 {
  font-weight: 300;
}