JSFiddle - React, Tailwind, and code Playground

by akash_payne

HTML

<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h1>Awesome Image Hover in Pure CSS Part I</h1>
<div class="content">
  <h2>Lily</h2>
  <div class="grid">
    <figure class="effect-lily">
      <img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12" />
      <figcaption>
        <div>
          <h2>Nice <span>Lily</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
        </div>
        <a href="#">View more</a>
      </figcaption>
    </figure>
    <figure class="effect-lily">
      <img src="https://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img1" />
      <figcaption>
        <div>
          <h2>Nice <span>Lily</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
        </div>
        <a href="#">View more</a>
      </figcaption>
    </figure>
  </div>
  <h2>Sadie</h2>
  <div class="grid">
    <figure class="effect-sadie">
      <img src="https://tympanus.net/Development/HoverEffectIdeas/img/2.jpg" alt="img02" />
      <figcaption>
        <h2>Holy <span>Sadie</span></h2>
        <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
        <a href="#">View more</a>
      </figcaption>
    </figure>
    <figure class="effect-sadie">
      <img src="https://tympanus.net/Development/HoverEffectIdeas/img/14.jpg" alt="img14" />
      <figcaption>
        <h2>Holy <span>Sadie</span></h2>
        <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
        <a href="#">View more</a>
      </figcaption>
    </figure>
  </div>
  <h2>Honey</h2>
  <div class="grid">
    <figure class="effect-honey">
      <img src="https://tympanus.net/Development/HoverEffectIdeas/img/4.jpg" alt="img04" />
   ...

CSS

.grid {
  position: relative;
  margin: 0 auto;
  padding: 1em 0 4em;
  max-width: 1000px;
  list-style: none;
  text-align: center;
}

/* Common style */

.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 320px;
  max-width: 480px;
  max-height: 360px;
  width: 48%;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */

.grid figure figcaption>a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/* Individual effects */

/*---------------*/

/***** Lily *****/

/*---------------*/

figure.effect-lily img {
  max-width: none;
  width: -webkit-calc(100% + 50px);
  width: calc(100% + 50px);
  opacity: 0.7;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-lily figcaption {
  text-align: left;
}

figure.effect-lily figcaption>div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  height: 50%;
}

figure.effect-lily h2,
figure.effect-lily p {
...