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

У цій інструкції ми розповімо, як додати такий елемент на ваш сайт і які налаштування доступні для його персоналізації.

Зміст:

• Додавання елемента Hover-ефект
• Налаштування вмісту
• Налаштування hover-ефекту

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

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

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

2. Також ви можете додати цей елемент у вже існуючу колонку (заповнену або порожню) в одному з блоків: для цього натисніть на іконку додавання нового елементу та оберіть Hover-ефект зі списку доступних елементів:

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

1. Наведіть курсор на елемент і натисніть на «шестерню» у верхньому лівому кутку, щоб відкрити налаштування:

2. У вкладці Контент ви можете:

① Завантажити фото з вашого пристрою чи вибрати вже існуюче з галереї сайту:

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

3. Перейдіть до вкладки Стиль, щоб активувати для елементу доступні налаштування вигляду, на кшталт заокруглення кутів чи тіні:

Налаштування hover-ефекту

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

① Тут ви можете вибрати елементи, що з’являтимуться після наведення курсору на зображення — заголовок, опис або кнопку:

② Змінити вирівнювання цих елементів:

③ Далі ви зможете налаштувати анімацію, яка відбувається для при наведенні, окремо для зображення та вибраних раніше елементів:

④ Також у цьому розділі ви зможете детальніше налаштувати вигляд фонового зображення у стані наведення, наприклад, додати фільтр чи обведення тощо:

2. У вкладці Дія ви можете вказати вашому елементу потрібну вам поведінку при натисканні:

Опублікуйте свій сайт, щоб застосувати ці зміни.

Оновлено: 21/11/2025