JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <a href="#" class="image-wrap">
      <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay red">
        <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
        </a>
            <a href="#" class="image-wrap">
      <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay blue">
        <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
        </a>
    </div>
  
  </div>
</div>

CSS

.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;  
}

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 1;
  transition:display .5s ease;
  display: none;
}

.image-wrap:hover .overlay {
  display:block;
}

.red {
  background: rgba(255,0,0,0.5);
}

.blue {
  background: rgba(0,0,255,0.5);
}