Hover effects

Hover effects are a way of adding interactive design features to your website to make it more alive and interesting for your customers. The feature is also a simple way of adding great design that makes your website look more professional.

The hover effect features can be used on five different modules:



Where to find hover effects

You will always find hover effects under the Settings tab of the modules mentioned above.


1. Settings

1.1. Enable hover effects 

Simply enable hover effects on a specific module by clicking on the toggle on the right side of the option.


1.2. Show element

Hover effects have three different styles: none, caption and icon. The none style is only showing a background and/or border on top of the image. The caption and icon style is additionally showing a text or icon on top of the image. Choose the style that you wish to apply.


1.3. Transition

Transition is whether the hover effect is fading fast or slow when hovering the image that the hover effect is applied to.


1.4. Icon on hover

Simply choose your preferred icon from the list and click on it to add it to your hover effect; to remove the icon, select it again until it is no longer highlighted.


2. How to enable caption for each module


3. Styling 

3.1. Overlay on hover

3.1.1 BACKGROUND

With this option you can choose a solid color or set the color transparency as the background for the overlay.


3.1.2. BORDER

Here you can define the border color, width, style and radius of the overlay.


3.2. Icon on hover

When styling the icon it is possible to define its size, color and spacing, both in terms of margin and padding.


3.3. Caption text on hover

When styling the caption text you can define the font, color, size, height, family, weight and alignment.


4. HOVER EFFECTS GLOBAL STYLING

Instead of individually styling each hover effect it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Hover Effects menu. Read more about Hover Effects Global Styling here!

 

Anything we’ve not covered?

Contact Us