JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<ul class="feature-showcase">
  <li>
    <figure class="features-photo">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="real-time">
      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous
        vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but
        also to other road users.</figcaption>
    </figure>
  </li>
  <li>
    <figure class="features-photo">
      <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="real-time">
      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous
        vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but
        also to other road users.</figcaption>
    </figure>
  </li>
</ul>

CSS

.feature-showcase {
  padding: 10px;
  width: 100%;
}

.feature-showcase li {
  width: 50%;
  float: left;
}

FIGURE.features-photo {
  position: relative;
}

FIGURE.features-photo IMG {
  display: block;
  width: 100%;
}

FIGURE.features-photo:before {
  content: "";
  display: block;
  background: black;
  opacity: 0;
  transition: opacity .50s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

FIGURE.features-photo:hover:before {
  opacity: .75;
}

FIGURE.features-photo FIGCAPTION.long-copy {
  text-align: center;
  display: block;
  color: #ffffff;
  position: absolute;
  width: 90%;
  max-height: 90%;
  transition: opacity .50s ease-in-out;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

FIGURE.features-photo:hover FIGCAPTION.long-copy {
  opacity: 1
}