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!
Without further ado, let’s begin our tutorial!
Step 1: First, create a new section on Elementor’s visual editor.
Step 2: Select which type of section do you need. This will basically work for any of them.
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.
Step 4: Now, right-click the bounding box of the column and click edit column.
Step 5: Then on the side-bar panel, go to Styles > Background > Background type and choose Classic.
Step 6: Then, go to Advanced and go to Advanced.
Step 7: Search for the Custom CSS section.
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!
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!
If you have more concerns or have encountered other issues, let us know in the comments section!
Nico
6 Feb 2020Michelle Meyer:
selector:hover {
transition: all .2s ease-in-out;
transform: scale(1.2);
cursor: pointer;
z-index: 1;
}
selector {
transition: transform .2s;
}
Michelle Meyer
9 Dec 2019Using this css works really well as the section pops out (ease in) but I would like it to ease out slower…right now it doesn’t really ease out, it just abruptly goes back to the original section size. Is there an adjustment I can make to the CSS that will slow the speed when leaving the hovered state?
Elementor Resources
12 Dec 2019Hi 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.