> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Hover-эффект для изображения


Hover-эффект для изображения — это анимация, которая активируется при наведении курсора. Она помогает сделать элементы на сайте более динамичными и интерактивными.

В этой инструкции мы расскажем, как добавить такой элемент на ваш сайт и какие настройки доступны для его персонализации.

**Содержание:**
* [Добавление элемента Hover-эффект](#1-dobavlenie-elementa-hover-effekt)
* [Настройка контента](#1-nastrojka-kontenta)
* [Настройка hover-эффекта](#1-nastrojka-hover-effekta)

# Добавление элемента Hover-эффект

Существует несколько вариантов того, как добавить этот элемент на страницу вашего сайта:

1. Вы можете добавить готовый блок, например wireframe-series-18-gallery, который уже содержит этот элемент, из галереи блоков.

| ${color}[#1aa900](Подсказка:) обратитесь к статье о [добавлении блоков](/ru/article/dobavlenie-blokov-wmgcv7/). 

2. Также вы можете добавить этот элемент в уже существующую колонку (заполненную или пустую) в одном из блоков: для этого нажмите на иконку добавления нового элемента и выберите Hover-эффект из списка доступных элементов:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1781vbz.png)
| ${color}[#1aa900](Подсказка:) элемент Hover-эффект вы можете найти во вкладке Медиа при добавлении элемента.

# Настройка контента

1. Наведите курсор на элемент и нажмите на «шестеренку» в верхнем левом углу, чтобы открыть **настройки**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_nzoscs.png)
2. Во вкладке **Контент** вы можете:

① Загрузить фото с вашего устройства или выбрать уже существующее из галереи сайта:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1aqhbnp.png)
② Выбрать режим масштабирования для изображения, перевернуть его горизонтально или вертикально и указать альтернативный текст:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1iby2r6.png)
3. Перейдите на вкладку **Стиль**, чтобы активировать для элемента доступные настройки внешнего вида, такие как скругление углов или тень:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_h7o792.png)
# Настройка hover-эффекта

1. Перейдите на вкладку **При наведении** в настройках:

① Здесь вы можете выбрать элементы, которые будут появляться при наведении курсора на изображение — заголовок, описание или кнопку:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_11x46p9.png)
|| ${color}[#ffa800](Примечание:) чтобы заголовок был виден всегда, а не только при наведении курсора, активируйте опцию «Всегда показывать заголовок».

| ${color}[#1aa900](Подсказка:) чтобы отредактировать контент этих элементов, сначала закройте настройки. Затем в самом элементе перейдите в режим «При наведении» и редактируйте выбранные элементы как обычные текстовые элементы или кнопки.

② Изменить выравнивание этих элементов:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1hokary.png)
③ Далее вы сможете настроить анимацию, которая происходит при наведении, отдельно для изображения и выбранных ранее элементов:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_bkg8rb.png)
④ Также в этом разделе вы можете настроить вид фонового изображения в состоянии наведения, например, добавить фильтр или обводку и т. д.:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_17x15md.png)
2. Во вкладке **Действие** вы можете указать вашему элементу нужное вам поведение при нажатии: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1md18h2.png)
[Опубликуйте свой сайт](/ru/article/publikaciya-sajta-1xvrq6l/), чтобы применить эти изменения.