Hover effects are mostly used in designs for improving styling and usability. Hover effects add extra energy to websites and enhance the experience of the users.

To use this element, click and drag it from the Media section of the Elements Panel

Once selected, you can edit the basic design on the element using the Design Panel. This includes the size, fill, opacity, stroke and shadow of the element. 

To edit the design properties of the element, use the Properties Panel. 

Use the Title, Title Emphasis, and Description section to type in your own text. 

The Preview Description checkbox allows you to see the description in the studio when using an effect that does not have it shown before the hover. 

To change the Paragraph Style used, select your style from the appropriate drop-down menu's.
(Please remember that size, font, and color are all associated directly with the Paragraph Style you have selected)

You are also able to edit the relative position of the Title and Description.

To edit the hover effect, select your desired effect from the drop-down menu. 

You are able to edit the Transition Speed as well as the colors used in some of the hover effects. 

You can view the effects using the Preview display, or by publishing your site. 

To edit the initial image, click on the image icon located just below the Title and Description section. 

Here, you are able to edit the fitting of the images as well as the image opacity.
(This opacity refers to the image within the element, and not the entire element itself. To edit the element opacity, please use the design panel.)

The Background color is what will show through when setting the image opacity. 

To add a new image on the hover effect, check the box for Display Image on Hover.

There, you will also be able to upload your hover image. 

You can link this element to a Page, Link or Anchor on the page. 

Select your link from the dropdown, and publish your site to test. 

​Click Here to view all the effects available for the hover effect element