Search

How to Add a Hover Effect to a Column in Elementor

Elementor has helped a lot in creating a website, in which the emphasis is on design. In Elementor, you can add some animation effects to make your website be more interactive. One of the animation effects you can add to an Elementor-powered page is a hover effect. You can add a hover effect whether to a section, column, or widget. This article will show you how to add a hover to a column in Elementor. By the way, if you are new to Elementor, you can refer to our previous article to learn how to use Elementor.

How to add a hover effect to a column in Elementor

In Elementor, column is a required element. It is where you can add widgets — the actual design elements to create your page. Same as other element types in Elementor, you can also style up a column to make it looks stylish. You can add a solid color background, image background, shadow, to hover effect. The built-in hover effect of Elementor allows you to use a different background, different border, and different box shadow on the hover state.

To start adding a hover effect to a column in Elementor, first, click the handle of the column you want to add the hover effect to — to switch the settings panel to the column settings model.

On the settings panel (panel on the left side), go to the Style tab and open the Background block. On the Background block, you can open the HOVER tab to set a different background on the hover state. You can use whether a solid color background, a gradient color background, or an image background. You can also set the transition duration (the transition from the normal state to the hover state) on the Transition Duration option.

Still on the Style tab, open the Background Overlay block to set a background overlay. You can open the HOVER tab on this block to set a different background overlay on the hover state. You can use whether a solid color overlay or a gradient color overlay. You can also apply CSS filters from this block, as well as the transition duration.

To set a different border and different box shadow on the hover state, you can open the Border block. Click the HOVER tab on this block and set the border style, border size, border color, border radius, and box shadow for the hover state. You can also set the transition duration on the Transition Duration option.

Adding an advanced hover effect to a column in Elementor

Unlike Divi Builder, Elementor doesn’t use CSS transform for its hover effect. As a result, you can only add basic hover effects. But since Elementor (the pro version) allows you to add custom CSS then you can use custom CSS to add a CSS transform in order to add an advanced hover effect. Take a look at the screencast below.

The hover effects on the screencast above are created using CSS transform.

To add CSS transform to a column, first go to the Advanced tab and open the Custom CSS block (make sure the settings panel is on the column settings panel mode). Add the following CSS code.

The code:

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

In CSS transform itself, there are 5 transform styles you can use:

  • Matrix
  • Translate
  • Scale
  • Rotate
  • Skew

The CSS code above uses the scale transform. You can simply replace it with the transform style you like. Read this page to learn more about CSS transform.

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?

Leave a Comment

Haven’t used Elementor Pro yet?