💻 Web-разбор: как сделать плавное увеличение фото при наведении курсора

💻 Web-разбор: как сделать плавное увеличение фото при наведении курсора

Всем привет! Сегодня разберём, как с помощью CSS сделать красивый эффект: когда наводишь курсор на картинку - она плавно увеличивается. Такой приём часто используют на сайтах и портфолио, чтобы выделить изображения и сделать интерфейс современным.

📄 HTML-разметка

<div class="img-hover-zoom">

<img src="путь_к_твоей_картинке.jpg" alt="Пример фото">

</div>

🎨 CSS для плавного увеличения

.img-hover-zoom {

height: 300px; /* Задаём высоту контейнера */

overflow: hidden; /* Прячем всё, что выходит за границы */

width: 300px; /* Ширина по желанию */

border-radius: 12px; /* Скругление углов для красоты */

box-shadow: 0 4px 16px rgba(0,0,0,0.15); /* Лёгкая тень */

}

.img-hover-zoom img {

width: 100%;

height: 100%;

object-fit: cover; /* Картинка заполняет контейнер */

transition: transform 0.5s ease; /* Плавная анимация */

}

.img-hover-zoom:hover img {

transform: scale(1.2); /* Увеличиваем фото при наведении */

}

📝 Как это работает?

✨Контейнер .img-hover-zoom ограничивает размер и скрывает лишнее (overflow: hidden).

✨Картинка плавно увеличивается с помощью transform: scale(1.2) при наведении.

✨Свойство transition отвечает за плавность анимации.

💡 Советы от Тима:

✨Можно менять степень увеличения: scale(1.1) - чуть-чуть, scale(1.5) - заметно.

✨Для адаптивности не задавайте фиксированную ширину/высоту, используйте проценты или max-width.

✨Если нужно увеличить не только фото, но и добавить подпись или рамку - заверните всё в контейнер.

JS тут не нужен - всё работает на чистом CSS!

Попробуй добавить этот эффект на свой сайт и поделись результатом! А если хочешь разбор других web-фишек - пиши в комментариях, Тим всегда на связи 🐢🎧

#HTML #Frontend