JSFiddle - React, Tailwind, and code Playground

by mzechar

HTML

<div class="team-listing">
  <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">
      <!-- no automatic sizing for SVG image, width and height must be set -->
      <image width="300" height="340" x="0" y="-20"
             xlink:href="http://api.leafsnap.com/v1/team/images/columbia/Neeraj.jpg?h=336"/>
      <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>
</div>

CSS

.team-listing {
  position: relative;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
}

.team-listing li {
  display: inline-block;
  overflow: hidden;
  float: left;
  height: 340px;
  list-style-position: inside;
  margin: 1px 1px 1px 1px;
  background-color: #fff;
}

.team-listing ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  flex-flow: row wrap;
  flex-shrink: 1;
  flex-grow: 1;
  float: left;
  min-width: 0;
  max-width: 100%;
  position: relative;
  filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
}

a {
  display: inline-block;
}

article {
  position: relative;
  width: 300px;
  height: 340px;
  overflow: hidden;
}

article:hover {
  background-color: #000;
}

/* 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;
  background-color: #2b9bdf;
  background-image: linear-gradient(to bottom,#2b9bdf,#0bbdd7,#a8dbe9);
  opacity:0.5;
}

article.content:before{
    content: '';
    display: block;
    width: 100%;
}

.portrait {
  position: relative;
  width: 300px;
  height: 340px;
  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);
}

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

.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;
}