Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS

Прочитавши цю статтю, ви дізнаєтеся, як зробити так, щоб при наведенні мишки зображення плавно збільшувалося. І не просто збільшувалося у розмірах, а щоб створювався ефект зуму.

Ми будемо використовувати лише html та css. JavaScript нам не знадобиться.

Отже, напишемо трохи html коду. Ми помістимо нашу картинку img в блок із класом photo

<div class="photo">
  <img src="https://webgolovolomki.com/wp-content/uploads/2020/11/hover-img.jpeg">
</div>

Тут я не додаю додаткових класів до картинки, щоб не заплутувати вас при поясненні. Але на своєму проекті, краще буде, якщо ви тегу img додасте якийсь свій клас і звертатиметеся до картинки цього класу.

Далі перейдемо до CSS. За допомогою hover ми зможемо змінювати значення властивостей.

В даному випадку ми збільшимо картинку, змінивши для неї властивість transform. Запишемо це у коді:

.photo:hover img {
  transform: scale(1.1);
}

Тут ми прописали наступну інструкцію: при наведенні (hover) на блок, в якому міститься картинка (клас photo), ми змінюємо значення transform у самої картинки (img).

Значення scale – це, на скільки ми масштабуємо картинку. За промовчанням йде значення 1.

Щоб додати трохи плавності переходу, додамо властивість transition для тега img

img {
  transition: transform 0.25s;
}

Тут ми вказали, яка властивість змінюватимемося і скільки триватиме перехід.

Тепер картинка у нас збільшується плавно, але вона виходить за межі своєї умовної рамки. Щоб це виправити, нам потрібно додати до блоку photo властивість overflow зі значенням hidden:

.photo {
  overflow: hidden;
}

Ми ніби кажемо: все, що виходить за межі цього блоку, приховуємо.

Але це ще не все, адже браузер не знає, який розмір у нашого блоку тому нам потрібно його задати. А для картинки прописати, щоб вона займала всю ширину та висоту блоку photo.

У результаті вийде такий код:

.photo {
  width: 400px;
  height: 350px;
  overflow: hidden;
}
img {
  transition: transform 0.25s;
}
.photo:hover img {
  transform: scale(1.1);
}

Приклад роботи:

See the Pen Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS by Pelegrin (@pelegrin2puk) on CodePen.

Сподіваюся ви зрозуміли принцип, яким можна робити збільшення картинки при ховері. Я прикріплю наше відео, де ще раз докладно пояснюю.