Hover-эффект для изображения — это анимация картинки при наведении на неё. Это дает отличную возможность добавить интерактивность к элементам на вашем сайте. С помощью инструментов на нашей платформе, вы сможете не только добавить наложение цвета или анимацию, но и сделать так, чтобы при наведении мыши поверх изображения появлялись дополнительные элементы.

Вот как это примерно выглядит на опубликованном сайте:



Добавление элемента Image hover

Для начала, добавьте Кастомный блок из галереи блоков на ваш сайт:



Наведите мышкой на пустую колонку и нажмите на нее, чтобы добавить элемент, а затем выберите Image hover во всплывающем окне:



... или добавьте Image hover как элемент к уже существующим блокам:



Настройки содержимого

Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть Настройки:



Во вкладке Контент вы можете загрузить новое изображение или выбрать его из галереи:



После добавления картинки вы можете ее отредактировать — например, добавить фильтр либо наложение цвета:



Подсказка: обратитесь к статье Редактирование картинок, чтобы узнать более подробную информацию о том, как настроить их отображение.

Добавление hover-эффекта

Переключитесь во вкладку При наведении в Настройках:



Здесь вы можете включить элементы, которые будут появляться после того, как пользователи наведут курсор на изображение — заголовок, описание или кнопку — и изменить их выравнивание:



Примечание: вы можете сделать так, чтобы заголовок отображался на картинке даже без наведения курсора:



Вы также можете добавить наложение цвета или фильтр к изображению при наведении для лучшего отображения текста:



Добавление анимации

Во вкладке При наведении вы можете отдельно настроить параметры анимации для элементов и самого изображения:



Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Была ли эта статья полезна?
отменить
Спасибо!