Блок с эффектом наведения 2

Готовый блок про тему наведения (выплывание)

by Anatoly Kulikov

HTML

<figure>
  <figcaption>
    <p>Здесь какая-то важная надпись</p>
  </figcaption>
</figure>

CSS

figure {
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background: #1565C0;
}
figcaption {
  position: absolute;
  top: 100%;
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  transition: all linear 0.2s;
}
figure:hover > figcaption {
  top: 0%;
}
p {
  display: block;
  margin: auto;
  padding: 10px;
}