🎮 IT Step by step | GameDev д… on Telegram: “💻 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