JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conteneur">
  <a href="#"><img src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/></a>
  <span class="titre">Titre de l'image 1</span>
 <span class="texte">texte au survol 1</span> 
</div>

<div class="conteneur">
  <a href="#"><img src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/></a>
  <span class="titre">Titre de l'image 2</span>
  <span class="texte">texte au survol 2</span>
</div>

<div class="conteneur">
  <a href="#"><img src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/></a>
  <span class="titre">Titre de l'image 3</span>
  <span class="texte">texte au survol 3</span> 
</div>

<div class="conteneur">
  <a href="#"><img src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/></a>
  <span class="titre">Titre de l'image 4</span>
  <span class="texte">texte au survol 4</span> 
</div>

CSS

.conteneur{
  width: 150px;
  display: inline-block;
  margin: 15px;
  text-align: center;
  position: relative; // très important pour positionner les spans en absolu
}

.conteneur img{
  width: 100%; // la largeur de l'image ne dépasse pas le conteneur donc 150px
}

.conteneur img:hover{
 opacity: 0.3; // l'image devient transparente ce qui permet de voir le texte caché derrière
}

.conteneur .texte{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;  // texte passe derrière l'image
}