Hover-эффект для изображения
Hover-эффект для изображения — это анимация, которая активируется при наведении курсора. Она помогает сделать элементы на сайте более динамичными и интерактивными.
В этой инструкции мы расскажем, как добавить такой элемент на ваш сайт и какие настройки доступны для его персонализации.
Содержание:
Добавление элемента Hover-эффект
Существует несколько вариантов того, как добавить этот элемент на страницу вашего сайта:
- Вы можете добавить готовый блок, например wireframe-series-18-gallery, который уже содержит этот элемент, из галереи блоков.
- Также вы можете добавить этот элемент в уже существующую колонку (заполненную или пустую) в одном из блоков: для этого нажмите на иконку добавления нового элемента и выберите Hover-эффект из списка доступных элементов:
Настройка контента
- Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть настройки:
- Во вкладке Контент вы можете:
① Загрузить фото с вашего устройства или выбрать уже существующее из галереи сайта:
② Выбрать режим масштабирования для изображения, перевернуть его горизонтально или вертикально и указать альтернативный текст:
- Перейдите на вкладку Стиль, чтобы активировать для элемента доступные настройки внешнего вида, такие как скругление углов или тень:
Настройка hover-эффекта
- Перейдите на вкладку При наведении в настройках:
① Здесь вы можете выбрать элементы, которые будут появляться при наведении курсора на изображение — заголовок, описание или кнопку:
② Изменить выравнивание этих элементов:
③ Далее вы сможете настроить анимацию, которая происходит при наведении, отдельно для изображения и выбранных ранее элементов:
④ Также в этом разделе вы можете настроить вид фонового изображения в состоянии наведения, например, добавить фильтр или обводку и т. д.:
- Во вкладке Действие вы можете указать вашему элементу нужное вам поведение при нажатии:
Опубликуйте свой сайт, чтобы применить эти изменения.
Последнее изменение: 21/11/2025
Спасибо!