Плавное затемнение фона и появление текста css


Наверняка вы встречали сайты с плиткой из изображений , обычно это портфолио какого либо дизайнера или же красиво оформленный набор услуг. И при наведении мыши изображение на плитке плавно затемняется и выпадает текст (например,  «подробнее»). Давайте разберем как это работает.

HTML

Разметка содержит родительский блок .bg  (фон) и дочерний — .blackout (полупрозрачный темный блок).

 

CSS

Блок .blackout изначально абсолютно прозрачен — opacity: 0. Но при наведении устанавливается прозрачность 100% —  opacity: 1 и содержащийся текст съезжает вниз на 15px. Все изменения происходят за 0.3s transition: all 0.3s ease-in-out

 

Результат