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

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

by Anatoly Kulikov

HTML

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

CSS

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