> ## 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).

# Adding a Hover effect element


A hover effect for an image is an animation that is activated when the cursor is moved over it. It helps make elements on the website more dynamic and interactive.

In this guide, we will explain how to add such an element to your website and what settings are available for its personalization.

**Contents:**
* [Adding a Hover effect element](#1-adding-a-hover-effect-element)
* [Content settings](#1-content-settings)
* [Hover effect settings](#1-hover-effect-settings)

# Adding a Hover effect element

There are several ways to add this element to your website page:

1. You can add a **pre-built block**, such as **wireframe-series-18-gallery**, which already contains this element from the block gallery.

| ${color}[#1aa900](Tip:) refer to the article on [adding blocks](/uk/article/dodavannya-blokiv-11jpok5/). 

2. You can also add this element to an existing column (filled or empty) in one of the blocks: to do this, click on the icon for adding a new element and select the Hover effect from the list of available elements:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_3qyt7q.png)
| ${color}[#1aa900](Hint:) You can find the Hover effect element in the Media tab when adding an element.

# Content settings

1. Hover over the element and click on the “gear” in the upper left corner to open the **settings**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_1sfady5.png)
2. In the **Content** tab, you can:

① Upload a photo from your device or select an existing one from the site gallery:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_v4vsl2.png)
② Select the scaling mode for the image, flip it horizontally or vertically, and specify alternative text:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_3jyilr.png)
3. Go to the **Style** tab to activate the available appearance settings for the element, such as rounded corners or shadows:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_lk41po.png)
# Hover effect settings

1. Go to the **Hover** tab in the settings:

① Here you can select the elements that will appear when you hover over the image — title, description, or button:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_w9633c.png)
|| ${color}[#ffa800](Note:) To make the title visible at all times, not just when hovering over the image, enable the “Always show title” option.

| ${color}[#1aa900](Tip:) To edit the content of these elements, first close the settings. Then, in the element itself, switch to “ Hover” mode and edit the selected elements as regular text elements or buttons.

② Change the alignment of these elements:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_165riin.png)
③ Next, you can customize the animation that occurs on hover, separately for the image and the previously selected elements:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_oh0u5x.png)
④ In this section, you can also customize the appearance of the background image when hovering, for example, add a filter or outline, etc.:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_ve0tw5.png)
2. In the **Action** tab, you can specify the desired behavior for your element when clicked: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/hover-efekt-dlya-zobrazhennya-_wfpjhq.png)
[Publish your site](/en-us/article/publishing-a-site-tgxmch/) to apply these changes.