How to do Horizontal Scrolling in Elementor | Elementor Resources 12611872352923
How to do Horizontal Scrolling in Elementor

How to do Horizontal Scrolling in Elementor

In this tutorial, I’ll teach you how to achieve this hover effect in just 5 easy steps:grow_on_hover_tutorial_0

Without further ado, let’s begin our tutorial!

Step 1: Add a new section and select the column structure you wanted. For this tutorial, I’ll choose to have a 3 column structure.

grow_on_hover_tutorial_1

grow_on_hover_tutorial_2

Step 2: Add a heading widget and go to the Advanced   → Backround  and choose Normal  and select your desired background.

grow_on_hover_tutorial_3

grow_on_hover_tutorial_3

Step 3: Set the following properties for the background image.

Step 4: Then on the Advanced → Custom CSS add the following Script

selector {
	height: 330px !important;
}
selector:hover {
	transition: background-position 1.5s linear 0s;
	background position: center bottom !important;
}

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!


Step 5:
Lastly, for the Horizontal Scroll on Hover just change the background-position from center bottom to top right. Here’s my output

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!

Leave a Reply

×
×

Cart