Hier die Demo dazu – bitte schaut Euch dort auch den Source-Code von HTML & CSS an!

Zip-Datei

Die Demo zusammengezippt zum Download…

HTML

<div class="galerie">

<figure>
  <img src="p/klein/1-gardasee.jpg" alt="Gardasee">
  <figcaption><p>Erklärender Text zum jeweiligen Bild, der auch über mehrere Zeilen gehen kann</p></figcaption>
</figure>

<!-- usw. -->

CSS

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2%;
}

.galerie figure {
  /* das Eltern-Element hier definieren! */
  position: relative;

  /* sonst sieht man den Text unterhalb des Bildes */
  overflow: hidden;
}

.galerie figcaption {
  text-align: center;
  width: 100%;
  position: absolute;

  /* nächste Zeile schiebt figcaption nach unten, außerhalb des sichtbaren Bereiches */
  top: 400px;
  left: 0;

  /* damit deckt figcaption das gesammte Bild ab */
  bottom: 0;

  background-color: rgba(255,255,255,.7);

  /* ohne Transition gibt es einen harten Übergang, 0.4s ist die Dauer des Übergangs */
  transition: top 0.4s ease-in-out;
}

.galerie figure:hover figcaption {
  /* bei Hover wird figcaption über das Bild „geschoben“ */
  top: 0;
}