Как изменить размер картинки при наведении: Как добиться эффекта увеличения изображения

Как сделать увеличение изображения при наведении?

В статье мы рассмотрим способ масштабирования картинки, используя только CSS свойства без использования JavaScript.

Чтобы картинка плавно увеличивалась при наведении мышки, вам понадобятся всего два простых правила в CSS:

1. transform: scale(1.5) для «изменение масштаба». Цифра 1.5, например, означает, что картинка станет увеличиваться в 1.5 раза.
2. transition для «плавного перехода, в секундах», например, от маленькой картинки к большой. Чем больше эта цифра, тем дольше (медленнее) длится переход.

Этот метод отлично подходит, например, для карточек товаров интернет-магазина. Он прост в реализации и хорошо смотрится на большинстве сайтов.

Показать статью

👉❓ Для Blogger: HTML-код картинки размещайте там, где должна отображаться картинка (например, на странице сообщений), а CSS-стили <style>...</style> можно добавить через Дизайн → ➕ Добавить гаджет→ <HTML/JavaScript>.^*

 💡Правильно оформленный HTML для отображения картинки с эффектом увеличения: 

  <img src="URL_ВАШЕЙ_КАРТИНКИ.jpg"  class="zoom-effect" alt="Описание">
<style>
.zoom-effect {
  transition: transform 0.5s ease;
}

.zoom-effect:hover {
  transform: scale(1.2);
}
</style>

Пример действия кода:

💡Этот код можно вставить как в гаджет HTML/JavaScript^* так и в Тему шаблона Blogger (режим HTML-редактора^**)
💡 Обратите внимание
Если картинка при увеличении вылезает за границы своего блока и перекрывает соседний текст, добавьте внутрь родительского блока (<div class="parent-container">...</div>) свойство overflow: hidden;. Оно работает как ножницы — просто прячет всё, что выходит за рамки блока.

Примечание! В Blogger можно добавить собственные CSS-правила непосредственно в настройки темы: ^**

1. Перейдите в свой блог: Blogger → Тема → Изменить HTML.
2. Нажмите CTRL + F и найдите строку </b:skin>.
3. Перед этой строкой вставьте свой CSS-код.

Важно: не используйте теги <style>...</style>, они здесь не нужны.