Плавное появление блока CSS
Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS.
Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.
<div class="o2t-element">i</div>
<div class="o2t-element--hidden">Скрытый элемент</div>
Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п.
CSS:
.o2t-element--hidden {
opacity: 0;
visibility: hidden;
transition: 0.55s opacity, 0.55s visibility;
}
.o2t-element:hover~.o2t-element--hidden {
opacity: 1;
visibility: visible;
}
Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility
До скрытого элемента мы добрались с помощью родственного селектора ~ (тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >
Пример с более сложной структурой
Допустим, у нас следующая структура:
<div class="o2t-element">i</div>
<div>
<div class="o2t-element--hidden">Плавно всплывающий/исчезающий блок при наведении</div>
</div>
Тогда CSS будет следующий:
.o2t-element:hover + div > .o2t-element--hidden {
opacity: 1;
visibility: visible;
}
Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: