How to Add a Hover Effect in Elementor via Custom CSS

Updated: January 5, 2021

Elementor has a built-in feature to add a hover effect to an element (we have covered it in the previous article). While the feature is useful enough, it has a drawback though. You can only add a hover effect to a section, column, the Image widget, the Button widget, and the Posts widget. The built-in hover effect feature of Elementor doesn’t allow you to add a hover effect to other widgets like the Text Editor widget, the Heading widget, and so on. Another drawback, you can only add a very basic hover effect.

Is there another option to add a hover effect in Elementor? Yes, there is. You can add a hover effect in Elementor via custom CSS. But to be able to add a custom CSS, you need to use Elementor Pro since custom CSS is only available on Elementor Pro (read: Elementor Free vs Elementor Pro).

Adding a hover effect in Elementor via custom CSS

Before getting started, let’s take a look a the example of the hover effects created via custom CSS.

Unlike the built-in hover effect of Elementor, you can use this method to add a hover effect to any element of Elementor. Be it section, column, or widget (all widgets). In this example, we will show you how to add a hover effect to a column.

First, click the column handle to switch the settings panel to the column settings panel mode. Once switched, go to the Advanced tab and open the Custom CSS block and paste the following CSS code.

The code:

selector:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.2);
    cursor: pointer;
    z-index: 1;
}

That’s it.

On the code above, we use the CSS transform property (transform) to add the hover effect. The transform type we use in this example is scale, with a duration of 1.2 seconds. There are 4 other transform types you can use:

  • Matrix
  • Translate
  • Rotate
  • Skew

If you want to use a different transform style, you can simply replace the transform value on the CSS code above. You can read this page to learn more about CSS transform.

You can go through the same route to add a hover effect to other elements. To add a hover effect to a section, you can click the section handle and go to the Advanced tab and open the Custom CSS block.

To add a hover effect to a widget, you can click the widget handle and again go to the Advanced tab and then open the Custom CSS block.

This page may contain affiliate links, which help support WP Pagebuilders.

One thought on “How to Add a Hover Effect in Elementor via Custom CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!