Search

How to Add a Hover Effect in Elementor via Custom CSS

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 our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

3 thoughts on “How to Add a Hover Effect in Elementor via Custom CSS”

  1. Hi, very helpful, thanks for posting. Would this work for changing brightness on hover? This is for Elementor’s hotspot widget. It already has a hover feature and works as intended when I hover over the image uploaded into the hotpot, but the problem is the hover effect (brightness increase) is also activated when I hover over the hotspot button, which is below the image. The hotspot button has it’s own hover effect which is the trigger to reveal the tooltip text. Perhaps by using CSS I can just make the hover effect (brightness) apply to the image, and not to the hotspot button. Any suggestions? Cheers

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?