JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<section id="mysection">
  <h2>My Section Title</h2>
  
  <div class="images">
    
    <a href="#">
      <span>Développement Web</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Web Design</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Montage</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Musique</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Développement Web</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Web Design</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Montage</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
    <a href="#">
      <span>Musique</span>
      <img src="https://picsum.photos/275/200" alt="">
    </a>
    
  </div>
</section>

CSS

#mysection {
  text-align: center;
}

#mysection .images {
  /* Règles pour le conteneur lui-même */
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  
  /* Règles de disposition des 8 images du conteneur */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  
}

#mysection .images a {
  position: relative;
  color: white;
  line-height: 0;
}

/* Ce <span> correspond à l'effet bleu transparent
  que l'on souhaite lors du :hover.
  Par défaut, il est invisible avec une opacité de 0 */
#mysection .images a > span {
  opacity: 0; /* Invisible par défaut */
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  padding-top: 2rem;
  background-color: rgba(106, 165, 255, 0.7);
  border-radius: 10px;
  transition: all 300ms;
}

/* Lorsque le <a> est en :hover,
  on affiche le <span> bleu transparent
  */
#mysection .images a:hover > span {
  /* Visible */
  opacity: 1;
}

#mysection .images a > img {
  border-radius: 10px;
}