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

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

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

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

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

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

.block {
  position: relative;
}
.block .hover {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 120px;
  height: 120px;
  opacity: 0;
}
.block:hover .hover {
  opacity: 1;
  background: rgba(0,0,0,.4);
}
b, i {
  display: block;
}

Мы задали классу block position: relative, чтобы появляющееся описание при наведении спозиционировать абсолютно относительно родителя block. Также скрыли описание (opacity: 0), а при наведении показали (opacity: 1).

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

.block .hover {
  transform: scale(0) rotateZ(90deg);
  transition: all .5s;
}
.block:hover .hover {
  transform: scale(1) rotateZ(0deg);
  background: rgba(0,0,0,.4);
}

See the Pen Hover-effect by Nikolay (@Only-to-top) on CodePen.

26/09/2019 09:43
Николай
26/09/2019 09:43