Hover effects

Hover effects change how an element looks while a viewer moves the mouse over it. Use them to make an element stand out or to show that it's clickable. You can add several hover effects to the same element.

Adding a hover effect

To add a hover effect to an element:

1. Select the element on the canvas.
2. In the right panel, open the Element tab.
3. Click the Effects icon (the lightning bolt).
4. Click the Hover effect tab.
5. Click + next to the effect you want to add.
6. Adjust the effect's settings, which open below its name.

To remove a hover effect, click − next to the effect in the Hover effect tab.

While the Hover effect tab is open, the canvas shows the selected element in its hover state, so you can check the result as you work.

Setting the hover transition duration

The Duration field at the top of the Hover effect tab sets how long an element takes to change into its hover state. Enter the time in milliseconds. The default is 250 milliseconds; a higher value makes the transition slower, a lower value makes it faster.

Available hover effects

The Hover effect tab offers the effects below. Which ones appear depends on the selected element: for example, Text color and Stroke appear only for text and heading elements.

• Outer Shadow: adds a shadow behind the element. Settings: Distance X, Distance Y, Color, Blur and Spread.
• Text shadow: adds a shadow to the text of a text element or button. Settings: Distance X, Distance Y, Color and Spread.
• Underline: adds a line to the text of a text element or button, for example under or over the text. Settings: Type, Style (solid or dashed) and Color.
• Greyscale: shows the element in grey tones. The percentage sets how strong the effect is.
• Backdrop: blurs whatever is behind the element. The value is the blur in pixels.
• Background color: changes the element's background to a color or gradient you choose.
• Text color: changes the color of the text in a text or heading element.
• Stroke: adds an outline to the letters of a text or heading element. Settings: Width and Color.
• Grow: makes the element larger or smaller. The Factor setting sets the scale: 1.1 makes the element 10% larger, and a value below 1 makes it smaller. The default is 1.1.
• Move: shifts the element from its position by a set Distance (1 to 100 pixels) in a Direction: Top, Right, Bottom or Left.
• Rotate: turns the element by the number of degrees set in Rotation, around the Pivot point you choose.
• Opacity: sets how see-through the element is while the viewer hovers over it. A value of 100 is fully visible and 0 is invisible.
• Border: adds or changes the element's border, with a color, width and style. Available for images, shapes, text, slideshows and videos.
• Rounding: rounds the element's corners. Available for images, shapes, text, slideshows and videos.
• Attention seeker: makes the element play a short animation, such as Shake or Pulse. Choose the animation under Type.

Hover effects and regular effects

Effects you add in the Effect tab are always visible. Those that are also hover effects, such as Outer Shadow, Greyscale and Backdrop, show as active in the Hover effect tab, where you can change them for the hover state only:

• Turn an effect off on hover: click − next to the effect in the Hover effect tab. The effect stays visible normally and switches off while the viewer hovers over the element.
• Change an effect on hover: adjust the effect's settings in the Hover effect tab. The new values apply only while the viewer hovers over the element.

For example, add Greyscale to an image in the Effect tab, then remove it in the Hover effect tab. The image shows in grey tones and turns to color when the viewer hovers over it.

Frequently asked questions

Why can't I add hover effects in the mobile layout?

Hover effects need a mouse, so they don't apply on mobile devices. The Hover effect tab is unavailable while you edit the mobile layout. Switch to the desktop layout to add or change hover effects.

How do I make a hover effect faster or slower?

Change the Duration field at the top of the Hover effect tab (right panel, Element tab, Effects icon). Duration is the time in milliseconds the element takes to change into its hover state. The default is 250; a higher value makes the transition slower.

Why don't I see a certain hover effect for my element?

The hover effects offered depend on the type of element you selected. For example, Text color and Stroke appear only for text and heading elements, and Border and Rounding only for images, shapes, text, slideshows and videos. Charts and forms have no effects, and the Effects icon is unavailable when several elements are selected.

How do I make an image turn from black and white to color on hover?

Select the image, open the Element tab in the right panel and click the Effects icon (the lightning bolt). In the Effect tab, add Greyscale. Then open the Hover effect tab and click − next to Greyscale. The image now shows in grey tones and turns to color while the viewer hovers over it.

Can I add a blur on hover?

No. Blur is available only in the Effect tab, where it applies to the element all the time. To blur what is behind an element on hover, use the Backdrop hover effect.

Updated on: 20/10/2026