How To Make A Scrolling Image On Hover In Elementor

Looking for a way to use the Elementor page builder to generate an image scroll effect on hover? When a user moves the cursor over an image, the effect of picture scrolling on hover is activated. If you have a large image to display, you can employ these features in a tiny region, where the user can hover over the image to see the rest of the image.

These features are used by the majority of websites that offer or display templates. A template screenshot is typically long, therefore displaying the whole screenshot to users will take up a lot of space. It also has an impact on the entire user experience of the website. As a result, you can easily use the image scroll effect functions to display long photos in a limited amount of area.

Preview

Take a look at the screencast below to get a sense of what we mean by the scrolling effect.

The Elementor page builder does not have any options for this by default, but you can easily add an image scroll effect feature to your website using custom CSS. So, in this tutorial, we'll show you how to make an image scroll effect with Elementor in the simplest way possible.

Make A Scrolling Image On Hover In Elementor

The custom CSS option is only available in Elementor Pro, so make sure you've upgraded to Elementor Pro before you begin. Now, open the Elementor editor and navigate to the page where you want to add the picture scroll effect. Now, click the "+" icon to add a section and then select a column.

Now add a one-column section.

After you've created the section, go to the Layout tab and select Min Height from the dropdown menu.

Now, on your newly generated section, add an inner section.

After adding the inner section, delete the default column.

Go back to the inner section's Layout tab and select Min Height from the dropdown menu.

Then, proceed to the Style tab. Set the background to Classic and add the image you wish to use in the background choice. Set the image location to Top Center and select No-repeat from the Repeat menu. Then, change the size to Cover.

To generate the image scroll effect, you must now apply some custom CSS. Navigate to the Advanced tab, then to the Custom CSS box. In the CSS code area, enter the following code.

selector{
-webkit-transition: ease-in-out 8s !important;
transition: ease-in-out 8s !important;
}
selector:hover{
background-position: center bottom !important;
}

Now add some additional decorum to make the section more engaging.

Here is the final Preview.

Final Word

If you want to develop a website with Elementor that offers interactive design, then the easy suggestion above is fantastic to implement to improve the user experience on your website. To perform this style, you need Elementor pro cause adding custom CSS doesn't come in the free version. If you find this tutorial helpful then share it with your community and also look for other Elementor tutorials.