How to Create Image Scroll Effect in Elementor

Need a way to create an image scrolling effect in Elementor ? In this article, we will guide you to create an image scrolling effect using Elementor on your web pages.

The image scroll effect will allow you to reveal the full image when the user hovers over the images. When you visit a website that sells website templates, you can see the full preview of the templates with image scroll effect features.

With these features, you can easily show your users the full view of the website in a small space. Normally, if you want to display a full image of a website, it will take up a lot of space on your web pages. Moreover, it affects the design of your website.

But with picture scroll effect, you can add more pictures in an attractive way which can easily grab audience's attention.

Create Image Scroll Effect in Elementor

Elementor does not provide a widget to add image scroll effect. So you need to add the effect using custom CSS. Custom CSS feature is only available with Elementor Pro. So make sure you have upgraded to Elementor Pro.

Now open a page with the Elementor editor and click the plus icon to add a section.

Now you need to select the column for your section. Here we select the single column section.

Now click on the section edit icon and in the layout tab set the minimum height to 500.

Now from the block widget add the inner section block to your created section and remove the default column. Right-click the column edit icon and click delete option to delete the main column.

Go to the edit option of the inner section again and in the layout tab set the minimum height to 500 as we showed earlier.

Now switch to the style tab of the inner section and set the background as classic from the background option. Next, you need to add your background image. From the image position option, set the position of the image by Top center. From the repeat option, set the option no-repeat and the size like cover.

Now switch to tab Advanced to add custom CSS. In the custom CSS field, add the following code:

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

You can change the transition value to change the scrolling effect of images. If you want to add multiple images with the same effect, you can duplicate the column and then change the background image.

Conclusion

By following the process, you will be able to add an image scroll effect to your website using the page builder Elementor. You can check out our other articles to learn:

We hope this article will be useful to you. If you like this article, please like our Facebook page to stay connected.