Realisiert mit HTML-Boxen. Hat CSS Media Query f. d. Box-Höhe, damit Content immer responsive in die Box passt.

Das umschließende DIV hat mit .item::after ein Overlay.

Für die Animation entscheidend:

.item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  transition: transform 300ms;
  background-color: #fefeff;
  transform: translate3d(0, 100%, 0);
  opacity: 0.8;
}

Die Animation kommt bei hover über den a tag des .item

.item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
  transform: translate3d(0, 0, 0);
}

Verwendung Tilde-Symbol ~ , das auch als Subsequent-sibling Combinator bekannt ist. Dies bedeutet im Grunde, dass alle Geschwister (im Beispiel: .b) NACH einem bestimmten Selektor (im Beispiel: .a) ausgewählt werden.

Dies hier:

.a ~ .b
background: red

heißt: Wähle alle .b aus, die nach .a kommen

.item h3 {
  margin: 0;
  display: block;
  background-color: #03199082;
  padding: 1rem;
  transform: translate3d(0, -100%, 0);
  transition: transform 300ms;
  color: #fff;
  height: 40%;
}