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

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

Эффект увеличения изображения при наведении — это отличный способ привлечь внимание пользователя к кликабельной картинке. В статье мы рассмотрим способ масштабирования картинки, используя  CSS свойства.

Для увеличения изображения (Zoom) можно использовать CSS свойства, которые позволяют управлять масштабированием, задавать максимальные размеры или подстраивать изображение под заданные размеры. Ниже представлен один из таких вариантов — увеличения картинки при наведении курсора мыши.

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

👉❓ Как вставить такой код^*

• ✅ Зайдите в Blogger → Дизайн.
• ✅ Нажмите ➕ Добавить гаджет → выберите  HTML/JavaScript.
• ✅ В поле Содержание вставьте код ниже (только <style>...</style> блок).
• ✅ Сохраните изменения → и обновите блог.

<style>
.post-body img {
  transition: all 0.4s ease;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  border-radius: 5px;
}

.post-body img:hover {
  transform: scale(1.1);
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>

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

Что делает этот код:

• ➡️ Добавляет тень, рамку и скруглённые углы к изображениям внутри постов.
• ➡️ Делает плавный эффект увеличения картинки при наведении мышкой.
• ➡️ Улучшает визуальное восприятие иллюстраций в блоге.

👉❓Этот код можно вставить как в гаджет HTML/JavaScript^*
так и в Тему шаблона Blogger (режим HTML-редактора^**)
👉❓Для большего увеличения измените значение transform: scale(1.1), например на 1.8

Добавление собственных CSS-стилей в шаблон Blogger^**

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

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