Плавное появление блока 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;
}

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