How to Create Image Scroll Effect on Hover in Elementor

Updated: June 3, 2022

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 WP Pagebuilders. Learn more

1 thought on “How to Create Image Scroll Effect 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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.