> ## 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-dodavannya-elementa-hover-efekt)
* [Налаштування вмісту](#1-nalashtuvannya-vmistu)
* [Налаштування hover-ефекту](#1-nalashtuvannya-hover-efektu)

# Додавання елемента Hover-ефект

Існує декілька варіантів того, як додати цей елемент на сторінку вашого сайту:

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

| ${color}[#1aa900](Підказка:) зверніться до статті про [додавання блоків](/uk/article/dodavannya-blokiv-11jpok5/). 

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

# Налаштування вмісту

1. Наведіть курсор на елемент і натисніть на «шестерню» у верхньому лівому кутку, щоб відкрити **налаштування**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1dbopp6.png)
2. У вкладці **Контент** ви можете:

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

1. Перейдіть до вкладки **У разі наведення** у налаштуваннях:

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

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

② Змінити вирівнювання цих елементів:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_6smrcs.png)
③ Далі ви зможете налаштувати анімацію, яка відбувається для при наведенні, окремо для зображення та вибраних раніше елементів:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_e1gshk.png)
④ Також у цьому розділі ви зможете детальніше налаштувати вигляд фонового зображення у стані наведення, наприклад, додати фільтр чи обведення тощо:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1fbn90w.png)
2. У вкладці **Дія** ви можете вказати вашому елементу потрібну вам поведінку при натисканні: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1jdv6fc.png)
[Опублікуйте свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб застосувати ці зміни.