How To Apply Hover Effect On A Column Of Elementor

Elementor has been a big help in making a website where the design is the main focus. You can make your website more interactive by adding some animation effects with Elementor. A hover effect is one type of animation you can add to a page made with Elementor. You can give a section, column, or widget a hover effect. This article will explain how to add a hover to a column in Elementor. By the way, if you don't know how to use Elementor yet, you can read our last articles to learn how.

Add A Hover Effect To A Column In Elementor

In Elementor, the column is a required element. It's where you can add widgets, which are the actual parts of your page's design. You can style a column the same way you style other types of elements in Elementor. You can give the hover effect a solid color background, an image background, or a shadow. With Elementor's built-in hover effect, you can change the background, border, and box shadow when the mouse is over them.

To start adding a hover effect to a column in Elementor, click on the column's handle, which will change the settings panel to the column settings model.

Go to the Style tab on the left-hand settings panel and open the Background block. Open the HOVER tab on the Background block to set a different background for the hover state. You can use a background with a solid color, a gradient of colors, or an image. With the Transition Duration option, you can also set how long it takes to go from the normal state to the hover state.

Open the Background Overlay block on the Style tab to set a background overlay. You can set a different background overlay for the hover state by opening the HOVER tab on this block. You can use either a solid color or a color that changes gradually. You can also set CSS filters and the length of the transition from this block.

You can open the Border block to set a different border and box shadow for the hover state. Click the HOVER tab on this block to change the hover state's border style, size, color, radius, and box-shadow. The Transition Duration option also lets you set how long the transition will last.

Applying Advance Hover Effect To A Column In Elementor

Unlike Divi Builder, Elementor doesn't use CSS transform for its hover effect. So, you can only add simple effects when you hover. But since the pro version of Elementor lets you add custom CSS, you can use custom CSS to add a CSS transform to add an advanced hover effect. Check out the video clip below.

The effects on hover in the video above are made with a CSS transform.

Go to the Advanced tab and open the Custom CSS block to add a CSS transform to a column (make sure the settings panel is on the column settings panel mode).

Add the CSS code below.

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

There are five types of CSS transforms that you can use -

• Matrix
• Translate
• Scale
• Rotate
• Skew

This CSS style uses scale transform, but you can use any style of your preference.

Wrapping Up

Hope this article will cover you regarding implementing the hover effect of any column made on Elementor. if you found this article helpful, please share it with your friends, and also, do check out new Elementor 3.8 release and its features.