Плавное затемнение фона и появление текста css
Наверняка вы встречали сайты с плиткой из изображений , обычно это портфолио какого либо дизайнера или же красиво оформленный набор услуг. И при наведении мыши изображение на плитке плавно затемняется и выпадает текст (например, «подробнее»). Давайте разберем как это работает.
HTML
Разметка содержит родительский блок .bg (фон) и дочерний — .blackout (полупрозрачный темный блок).
|
1 2 3 4 5 |
<div class="bg"> <div class="blackout"> <h4>Подробнее</h4> </div> </div> |
CSS
Блок .blackout изначально абсолютно прозрачен — opacity: 0. Но при наведении устанавливается прозрачность 100% — opacity: 1 и содержащийся текст съезжает вниз на 15px. Все изменения происходят за 0.3s transition: all 0.3s ease-in-out
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.bg { background-image: url(https://static.pexels.com/photos/295821/pexels-photo-295821.jpeg); background-size: cover; background-position: center; position: relative; width: 300px; height: 190px; } .blackout { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; background-color: rgba(0,0,0,0.75); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .blackout h4 { -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-top: -15px; } .bg:hover .blackout { opacity: 1; } .bg:hover .blackout h4 { margin-top: 0; } |
Результат
Возможно, вам будет интересно:
