JSFiddle - React, Tailwind, and code Playground

by mzechar

HTML

<ul>
<li>
  <svg width="0" height="0">
  <clipPath id="circle">
    <circle cx="150" cy="150" r="100"/>
  </clipPath>
</svg>
<a href="#">
  <article>
    <svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" height="100%" width="100%">
      <!-- no automatic sizing for SVG image, width and height must be set -->
      <image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" x="0" y="40"
             xlink:href="http://api.leafsnap.com/v1/team/images/columbia/Neeraj.jpg?h=300"/>
      <circle class="ring" cx="150" cy="150" r="100" />
    </svg>
    <div class="bio">
      <h2>Chun-Kang Chen</h2>
      <h4>Article Subtitle</h4>
    </div>
  </article>
</a>
  
</li>
<li>
  <svg width="0" height="0">
  <clipPath id="circle">
    <circle cx="150" cy="150" r="100"/>
  </clipPath>
</svg>
<a href="#">
  <article>
    <svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <!-- no automatic sizing for SVG image, width and height must be set -->
      <image width="400" height="300" x="-100" y="0"
             xlink:href="http://api.leafsnap.com/v1/team/images/columbia/Neeraj.jpg?h=300"/>
      <circle class="ring" cx="150" cy="150" r="100" />
    </svg>
    <div class="bio">
      <h2>Chun-Kang Chen</h2>
      <h4>Article Subtitle</h4>
    </div>
  </article>
</a>
</li>

</ul>

CSS

a {
    display: inline-block;
}
article {
    position: relative;
    width: 300px;
    height: 350px;
    overflow: hidden;
}
.portrait {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.portrait image {
    clip-path: url(#circle);
}
a:hover .portrait image {
    clip-path: none;
}
.ring {
    fill: none;
    stroke: white;
    stroke-width: 1;
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(1.8);
    transition: transform .3s ease, opacity .4s ease;
}
a:hover .ring {
    opacity: 1;
    transform: scale(1);
}
.bio {
    position: absolute;
    bottom: 0;
    padding: 1rem 2rem;
    color: #000;
}
h2 {
    font-size: 1.5em;
    font-weight: bold;
}
h4 {
    font-weight: 300;
}
h2, h4 {
    margin: 0;
    font-family: sans-serif;
}