Плавное появление блока CSS

CSS

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

<div class="o2t-element">i</div>

<div class="o2t-element--hidden">Скрытый элемент</div>

Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п.

.o2t-element--hidden {
    opacity: 0;
    visibility: hidden;
    transition: .55s opacity, .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;
}

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

Articoli correlati