How to Grow Column on Hover in Elementor - WpBuilt 1350476922971705023
How to Grow Column on Hover in Elementor

How to Grow Column on Hover in Elementor

Looking for the hover effect where the column, including the background and the contents, zoom-in, grows or scales up when you hover the mouse cursor over it? Well, let me tell you, you’re on the right tutorial! I’ll teach you how to create that hover effect through Elementor step-by-step without plugins or addons!

This will be the effect that you should be able to get once you completed this tutorial. Please excuse how ancient my example is!

grow_on_hover_tutorial_0

Without further ado, let’s begin our tutorial!

Step 1: First, create a new section on Elementor’s visual editor.

grow_on_hover_tutorial_1

Step 2: Select which type of section do you need. This will basically work for any of them.

grow_on_hover_tutorial_2

Step 3: Let’s add some widgets to our section to spice things up! Just drag your chosen widget from the sidebar widgets panel to the section area.

grow_on_hover_tutorial_3

grow_on_hover_tutorial_4

Step 4: Now, right-click the bounding box of the column and click edit column.

grow_on_hover_tutorial_5

Step 5: Then on the side-bar panel, go to Styles > Background > Background type and choose Classic.

grow_on_hover_tutorial_6

Step 6: Then, go to Advanced and go to Advanced.

grow_on_hover_tutorial_7

Step 7: Search for the Custom CSS section.

grow_on_hover_tutorial_8

Step 8: Once you find it, paste this code on the text area there:

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

NOTE: See that “selector”? That’s the type of Widget we’re currently using. So if you decide to change the heading, make sure you update it as well so you don’t end up change something else… like I did!

grow_on_hover_tutorial_9

Now we’re done! Just replicate the same procedure to your sections and you’d be designing like the best!

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

This Post Has 8 Comments

  1. David

    Has anyone found some code that will apply to the background image only?
    thanks so much in advance…

  2. Nikola

    Is there a way to apply this only to the background image of a section? Thanks in advance.

  3. Philipp

    Hey 🙂 The code works great, but I agree with Michelle. I would also like to have the column to ease out slower. (The zoom-in effect is something else and not related to the hovering effect.) With the given code the column eases in slowly when you hover over it but (as Michelle pointed out) the column jumps back immediately (in 0 seconds) when the mouse leaves the column. Here it would be great if the column also eases out slowly when the mouse leaves the column. Do you have any suggestions how to change the code to include this effect?
    Thanks a lot 🙂

    1. Elementor Resources

      Hello Philip!

      I think Nico has already pointed out a good solution for this. Check his comment below 😀

  4. Carlos Vargas

    Thanks Nico that was exactly what I was looking for

  5. Nico

    Michelle Meyer:

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

  6. Elementor Resources

    Hi Michelle 🙂 You can do this by going to the column or setting you to want to animate. Click the Advanced tab, go to motion effect pick the zoom-in effect ( if that is the effect you want to use ) then change the animation duration to slow and you can control the delay in animation manually in animation delay, just enter the delay in millisecond.

Leave a Reply

wp-cta.png

Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template

×

Cart