Если вы ищете способ добавить интерактивности вашим изображениям, обратите внимание на css. С помощью всего нескольких строк кода вы можете добавить эффект «масштабирования» при наведении курсора на изображение. Ознакомьтесь с этой статьей в блоге, чтобы узнать, как это сделать.

В этой статье мы создадим эффект увеличения картинки при наведении методом CSS3 (а, именно благодаря свойству transform). Данное свойство простое, но при этом позволяет делать красивые переходы на сайте.

Также его можно сочетать с другой анимацией (движение текста, затемнение и так далее). Эффект увеличения картинки при наведении используется довольно часто. Например: карточки товаров в интернет-магазине, превью статей в блоге, фотогалерея.

Навигация по статье

Полезные ссылки

Пример увеличение картинки при наведении: https://toni.codelab.pro/hover-zoom/index.html

Разметка

Разметка довольно простая: включается в себя бокс и изображение внутри него. Бокс выступает в роли контейнера и не позволяет картинке выйти на пределы при увеличении.

<div class="box">
  <img src="./image/image.jpg" alt="Image" class="picture" />
</div>

Стили

Комментарии даны в коде.

.box {
  width: 600px; /* ширина бокса */
  height: 500px; /* высота бокса */
  position: relative; /* размещаем относительно бокса */
  overflow: hidden; /* все что выходит за границы - скрываем */
  border: 3px solid #fff;
}

.picture {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover; /* адаптариуем картинку под бокс */
  transition: 0.2s; /* для плавности анимации */
}

.box:hover .picture {
  transform: scale(1.15); /* увеличиваем картинку при наведении */
}