There are several animation effects you can add to an Elementor-powered page on your WordPress site. In addition to entrance animation and scroll effect, another animation effect you can add to your Elementor page is hover effect. Unlike scroll effect, the hover effect feature is available on both versions of Elementor (free and pro) so you don’t need to upgrade your Elementor to the pro version if you don’t need to (read: Elementor Free vs Elementor Pro).
We have to say that the hover effect feature of Elementor falls behind Divi Builder’s. Divi Builder makes use of CSS transform to offer advanced hover effects to users. Also, the method of adding a hover effect in Divi Builder is way easier than Elementor. But if you still love Elementor, that’s no problem. This article will show you how to add a hover effect in Elementor.
Adding a hover effect in Elementor
In Elementor, you can add a hover effect to a section, column, and widget. However, not all Elementor widgets cannot be added a hover effect. For instance, you can’t add a hover effect to the the Text Editor widget and the Heading widget. While some widgets you can add a hover effect to are:
- Image
- Button
- Posts
If you are new to Elementor, you can read our previous article to learn how to use Elementor. By the way, here is an example of how a hover effect is implemented in columns.
Adding a hover effect to an Elementor section
To add a hover effect to a section, first, click the section handle to turn the panel into the section settings panel.
Once the panel switches to the section settings panel, go to the Style tab. First, you can open the Background block to set a different background to the hover state. To so do, click the HOVER tab. Select the background type, background color, and background image if you prefer to use an image. You can also set the transition duration on the Transition Duration option.
Next, you can open the Background Overlay block to add an overlay to the background. Click the HOVER tab to add a background overlay to the hover state. Simply select the background type, background color, or background image if you prefer to use an image as the background. You can also set a CSS filters if you want it.
If you want to add a different border to the hover state, you can open the Border block. Click the HOVER tab and set the border type, border color, border width, and border radius. From this block, you can also set the box shadow of the hover state.
Adding a hover effect to an Elementor column
To add a hover effect to a column in Elementor, you can click the column handle to turn the panel into column settings panel.
Once the panel switches into the column settings panel, go the Style tab and open the Background block. On the Background block, click the HOVER tab. Select the background type, background color, background image (if you prefer to use an image), and transition duration.
To use a different border on the hover state, you can open the Border block and click the HOVER tab. On the Border block, you can set the border type, border width, border color, and border radius. You can also set the box shadow from this block.
Adding a hover effect to an Elementor widget
As said above, not all Elementor widgets support the hover effect. Three widgets you can add a hover effect to are the Image widget, the Button widget, and the Posts widget. In this article, we will show you how to add a hover effect to the Image widget.
First, add the Image widget to the canvas area (you can click the widget handle if you already have an image widget you want to add the hover effect to). Once the Image widget is added, click the image picker and select the image you want to use.
Go to the Style tab. On the Image block, click the HOVER tab. From the HOVER tab, you can set the image opacity, apply CSS filters, set the transition duration, hover animation, border type, border color, border width, border radius, and box shadow.
The bottom line
Adding a hover effect to an element might is a great idea to increase the engagement on your page. Elementor has made it easy for you to add a hover effect to an element thanks to its built-in hover effect feature. You can make use of this feature to make your page be more interactive.
