How to Auto Scroll Image on Hover in Elementor

Did you ever find a website whereby when you hover your cursor over an image, it will reveal the rest part of the image with a scroll effect? This type of effect usually found on a website that offers website templates. The purpose of the effect is to allow visitors to see the full screenshot of a template (which usually long). Elementor has no default feature to create this type of effect, but you can create it using custom CSS.

To give you an overview of the scrolling effect we mean, take a look at the following screencast.

How to Create Image Scroll Effect on Hover in Elementor

Before we get started, make sure you have upgraded your Elementor to pro version since custom CSS is only available in Elementor Pro. Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor. New to Elementor? You can read our previous article to learn how to use Elementor.

On the Elementor editor, add a new section by clicking the plus button on the canvas area. Select the one-column structure.

On the Layout block under the Layout tab, set the height to Min Height on the Height dropdown. Set the minimum height to around 400.

Add Inner Section to the section you have just added and delete of the default columns. You only need one column for this matter.

Set the height of inner section to Min Heigh like its parent section as we have showed above.

With the Inner Section still selected, go to the Style tab. On the Background block, set the background type to Classic and select the image you want to use by clicking the image picker.

Set the image position to Top Center. On the Repeat option, set to No-repeat. Set the size to Cover.

Next, go to the Advanced tab and open the Custom CSS block and paste the following CSS snippet.

The CSS snippet:

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

If you want to change the scrolling speed, you can simply change the value of the transition variable on the CSS snippet above.

If you want to duplicate the effect, you can duplicate the outer column (column of the parent section).

The Bottom Line

If you want to create a website that offers website templates with Elementor, then the simple tip above is great to be implemented to increase the user experience on your website. Your visitors will be able to have a glance look of a template appealing to them before they click the demo button (if you offer a demo). The ability to add custom CSS in Elementor Pro makes it possible for you to add an effect that is not offered by Elementor by default.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to start a profitable blog with WordPress? OF COURSE!

1 thought on “How to Auto Scroll Image on Hover in Elementor”

  1. Great, I’ve searched a lot of on google, Now I’ve got the way, and it’s worked for me, Thank you for the article.

    Best Regards
    Bashar

    Reply

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Haven’t used Elementor Pro yet?
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.