💻 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
