Всплывающее описание при наведении на блок

При наведении на блок появляется описание, и исчезает когда курсор покидает его.

Создадим HTML разметку.

<div class="blocks">

    <div class="block">
        <div class="block__hidden">
            <b>Заголовок</b>
            <i>Подпись</i>
        </div>
    </div>

    <div class="block">
        <div class="block__hidden">
            <b>Заголовок</b>
            <i>Подпись</i>
        </div>
    </div>

    <div class="block">
        <div class="block__hidden">
            <b>Заголовок</b>
            <i>Подпись</i>
        </div>
    </div>

</div>

Блок с классом blocks — обёртка для всех блоков. Див с классом block — это сам блок с каким-то содержимым. Блок c классом block__hidden — это скрытый элемент, который будет появляться при наведении на block.

Стилизуем элементы.

.blocks {
    display: flex;
}
.block {
    width: 130px;
    height: 130px;
    margin: 5px;
    border: 3px solid #435934;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.block .block__hidden {
    opacity: 0;
}
.block:hover .block__hidden {
    opacity: 1;
}
b, i {
    display: block;
}

Мы задали классу block display: flex (+ выравнивание), чтобы спозиционировать внутренние элементы строго по центру. Также скрыли описание (opacity: 0), а при наведении показали (opacity: 1).

Чтобы эффект появления был интересней, можно добавить плавность появления блока при наведении курсора с помощью свойства transition и CSS3 свойств transform: scale и transform: rotateZ. Чтобы наше описание появлялось с увеличением и поворотом по оси Z.

.block .block__hidden {
    transition: .4s;
    transform: scale(0) rotateZ(90deg);
}

.block:hover .block__hidden {
    transform: scale(1) rotateZ(0deg);
}
Кнопка наверх для сайта