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.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.
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.1. Overlay on hover
With this option you can choose a solid color or set the color transparency as the background for the overlay.
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!