Увеличение картинки при наведении CSS (hover)

Пример увеличения картинки при наведении CSS (hover). Для изменение масштаба добавлено свойство transform с функцией scale(). Свойство transition отвечает за плавное увеличение изображения, с помощью него устанавливаем время масштабирования.

Пример

HTML


<div class="hover-image-scale">
  <img src="image.jpg" alt="" class="hover-image-scale">
</div>

CSS


.hover-image-scale {
  display: inline-block; 
  overflow: hidden; /* Скрываем всё за контуром */
}
.hover-image-scale img {
  transition: 1s; /* Время эффекта */
  display: block; 
}
.hover-image-scale img:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}