JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<!-- start BOX -->
<div class="box">
  <img src="http://placehold.it/300x300">
  <div class="overlay">
    <a href="//www.nghs.com">
      <div class="text">This is another caption<br/><br/>Learn more</div>
    </a>
  </div>
</div>
<!-- end BOX -->
<!-- start BOX -->
<div class="box">
  <img src="http://placehold.it/300x300">
  <div class="overlay">
    <a href="//www.nghs.com">
      <div class="text">This is another caption<br/><br/>Learn more</div>
    </a>
  </div>
</div>
<!-- end BOX -->

CSS

.box {
  height: auto;
  width: 300px;
  float: left;
  margin-bottom: 20px;
  position: relative;
  line-height: 0px;
}

.box img {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  display: none;
  background-color: #A9A93A;
  line-height: 1.4em;
}

.overlay a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.overlay .text {
  position: absolute;
  color: #fff;
  top: 33%;
  width: 100%;
  text-align: center;
}

JavaScript

$(document).ready(function() {

  $('.box').hover(function() {
    $(this).find('.overlay').fadeToggle(300);

  });

});