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

🗓️ Оновлено: 05.08.2022
💬Коментарів: 0
👁️Переглядів: 4560

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

Ми будемо використовувати лише 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.

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

Стаття була корисною?
👍
Так - 18
👎
Ні - 3
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 14207
Поява елементів при скролі
Переглядів: 13438
Як зробити ефект натискання кнопки на CSS
Переглядів: 4766
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 4560
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 4419
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab