How to Create Image Scroll Effect on Hover in Elementor

Updated: November 9, 2021

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 snipped.

The CSS snipped:

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 snipped 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.

Originally posted on: November 9, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.