How to do Horizontal Scrolling in Elementor - WpBuilt 1350476922971634823
How to do Horizontal Scrolling in Elementor

How to do Horizontal Scrolling in Elementor

Want Elementor Addons for your Website? Click here!

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.



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



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


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 One Comment

Leave a Reply