Hover-эффект для изображения
Hover-эффект для изображения — это анимация картинки при наведении на неё. Эта функция даёт отличную возможность добавить интерактивность к элементам на вашем сайте. С помощью инструментов на нашей платформе, вы сможете не только добавить наложение цвета или анимацию, но и сделать так, чтобы при наведении мыши поверх изображения появлялись дополнительные элементы.
Вот как это примерно выглядит на опубликованном сайте:
![](https://media.giphy.com/media/fAb0aUN6hgJ3r0bvsc/giphy.gif)
Для начала добавьте Кастомный блок из галереи блоков на свой сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-30_u22h6f.png)
Наведите мышкой на пустую колонку и нажмите на неё, чтобы добавить элемент, а затем выберите Hоver-эффект во всплывающем окне:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-31-1_16tb0e0.png)
... или добавьте Hоver-эффект как элемент к уже существующим блокам:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-32_5ds94n.png)
Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть Настройки:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-33_rr8zqo.png)
Во вкладке Контент вы можете загрузить новое изображение или выбрать его из галереи:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-34_ba7z9n.png)
После добавления картинки вы можете её отредактировать — например, добавить фильтр либо наложение цвета:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-35_1sldw7n.png)
Подсказка: обратитесь к статье Редактирование картинок, чтобы узнать более подробную информацию о том, как настроить их отображение.
Переключитесь во вкладку При наведении в Настройках:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-36_1jy2v5q.png)
Здесь вы можете включить элементы, которые будут появляться после того, как пользователи наведут курсор на изображение — заголовок, описание или кнопку — и изменить их выравнивание:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-37_1p7jkne.png)
Примечание: вы можете сделать так, чтобы заголовок отображался на картинке даже без наведения курсора:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-40_xq0mvn.png)
Вы также можете добавить наложение цвета или фильтр к изображению при наведении для лучшего отображения текста:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-38_11dp3kk.png)
Во вкладке При наведении вы можете отдельно настроить параметры анимации для элементов и самого изображения:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-39_1st4w08.png)
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Вот как это примерно выглядит на опубликованном сайте:
![](https://media.giphy.com/media/fAb0aUN6hgJ3r0bvsc/giphy.gif)
Добавление элемента Image hover
Для начала добавьте Кастомный блок из галереи блоков на свой сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-30_u22h6f.png)
Наведите мышкой на пустую колонку и нажмите на неё, чтобы добавить элемент, а затем выберите Hоver-эффект во всплывающем окне:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-31-1_16tb0e0.png)
... или добавьте Hоver-эффект как элемент к уже существующим блокам:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-32_5ds94n.png)
Настройки содержимого
Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть Настройки:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-33_rr8zqo.png)
Во вкладке Контент вы можете загрузить новое изображение или выбрать его из галереи:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-34_ba7z9n.png)
После добавления картинки вы можете её отредактировать — например, добавить фильтр либо наложение цвета:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-35_1sldw7n.png)
Подсказка: обратитесь к статье Редактирование картинок, чтобы узнать более подробную информацию о том, как настроить их отображение.
Добавление hover-эффекта
Переключитесь во вкладку При наведении в Настройках:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-36_1jy2v5q.png)
Здесь вы можете включить элементы, которые будут появляться после того, как пользователи наведут курсор на изображение — заголовок, описание или кнопку — и изменить их выравнивание:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-37_1p7jkne.png)
Примечание: вы можете сделать так, чтобы заголовок отображался на картинке даже без наведения курсора:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-40_xq0mvn.png)
Вы также можете добавить наложение цвета или фильтр к изображению при наведении для лучшего отображения текста:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-38_11dp3kk.png)
Добавление анимации
Во вкладке При наведении вы можете отдельно настроить параметры анимации для элементов и самого изображения:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/mockup-39_1st4w08.png)
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Обновлено на: 26/04/2024
Спасибо!