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
• Content settings
• 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.

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:

Content settings

1. Hover over the element and click on the “gear” in the upper left corner to open the settings:

2. In the Content tab, you can:

① Upload a photo from your device or select an existing one from the site gallery:

② Select the scaling mode for the image, flip it horizontally or vertically, and specify alternative text:

3. Go to the Style tab to activate the available appearance settings for the element, such as rounded corners or shadows:

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:

② Change the alignment of these elements:

③ Next, you can customize the animation that occurs on hover, separately for the image and the previously selected elements:

④ In this section, you can also customize the appearance of the background image when hovering, for example, add a filter or outline, etc.:

2. In the Action tab, you can specify the desired behavior for your element when clicked:

Publish your site to apply these changes.

Updated on: 11/21/2025