JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image-gallery">
    <div class="image-item">
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/gitter/" title="Gitter"><br>
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Korbfenstergitter-portfolio-1018x1024.jpg" alt="Gitter">
        <p></p>
        <div class="overlay">
          <p>Gitter</p>
        </div>
      </a>
      <p><a href="https://php81.kunstschlosserei-jogi.ch/produkte/gitter/" title="Gitter"> </a>
      </p>
    </div>
    <div class="image-item">
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/konstruktionen/" title="Konstruktionen"><br>
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Portfolio_Konstruktionen.jpg" alt="Konstruktionen">
        <p></p>
        <div class="overlay">
          <p>Konstruktionen</p>
        </div>
      </a>
      <p><a href="https://php81.kunstschlosserei-jogi.ch/produkte/konstruktionen/" title="Konstruktionen"> </a>
      </p>
    </div>
    <div class="image-item">
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/geschenkartikel/" title="Geschenkartikel"><br>
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/geschenkartikel-1-681x1024.jpg" alt="Geschenkartikel">
        <p></p>
        <div class="overlay">
          <p>Geschenkartikel</p>
        </div>
      </a>
      <p><a href="https://php81.kunstschlosserei-jogi.ch/produkte/geschenkartikel/" title="Geschenkartikel"> </a>
      </p>
    </div>
    <div class="image-item">
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/wandbilder/" title="Wandbilder"><br>
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/wandbilder-4-1024x717.jpg" alt="Wandbilder">
        <p></p>
        <div class="overlay">
          <p>Wandbilder</p>
        </div>
      </a>
      <p><a href="https://php81.kunstschlosserei-jogi.ch/produkte/wandbilder/"...

CSS

.container {
    box-sizing: border-box;
}

.image-gallery {
    border: 1px solid red;
    margin: 0;
    padding: 0;
    line-height: 0 !important;
    column-count: 4;
    -webkit-column-count: 4;
}

.image-gallery .image-item {
    position: relative;
    background: blue;
}

.image-gallery img {
    width: 100% !important;
    height: auto !important;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #162912c3;
    color: #fff;
    top: 0;
    left: 0;
    transform: scale(0);
}

.image-item:hover .overlay {
    transform: scale(1);
}