Как сделать плавное увеличение картинки при наведении — эффект на чистом 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.

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