Меню

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Для создания плавного увеличения картинки при наведении на нее можно использовать CSS-переходы (transitions) и псевдокласс :hover. Вот пример кода:

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

CSS:

.image-container {
  width: 200px; /* Задайте размеры контейнера */
  height: 200px;
  overflow: hidden; /* Скрыть часть изображения, выходящую за пределы контейнера */
}

.image-container img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* Добавляем плавный переход для свойства transform */
}

.image-container:hover img {
  transform: scale(1.2); /* Увеличиваем изображение при наведении */
}

В данном примере мы создаем контейнер .image-container, внутри которого располагается изображение <img>. При наведении на контейнер мы применяем свойство transform: scale(1.2), которое увеличивает размер изображения на 20% (можно настроить в соответствии с вашими потребностями). Плавный переход достигается с помощью свойства transition, которое определяет время (0.3s) и функцию сглаживания (ease) для анимации изменения свойства transform.

Вы можете настроить размеры контейнера и изображения, а также продолжительность перехода в соответствии с вашими требованиями.

Меню