JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div>
<div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div><div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div>
<div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div>
<div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div>
<div class="gallery">
  <div class="image">
    <img src="http://gearheads.org/wp-content/uploads/2014/01/1969-Camaro-SS-Pro-Touring.jpg">
  </div>
  <div class="text">
    Texto
  </div>
</div>

CSS

*{
  margin:0;
}
.gallery{
  position:relative;
  display:inline-block;
  width:33.33%;
  margin:%;
  height:150px;
  float:left;
}
.image{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  overflow:hidden;
  width:100%;
  height:100%
}
.image > img{
  height:100%;
}
.text{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  overflow:hidden;
  text-align:center;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  color:#fff;
  transition:0.3s;
}
.text:hover{
  background:rgba(0,0,0,0.1);
}