Creating Scrolling Screenshot Preview Effect in Elementor - WpBuilt 1350476922971705723
Creating Scrolling Screenshot Preview Effect in Elementor

Creating Scrolling Screenshot Preview Effect in Elementor

Designing your website is considered the crucial part in web development. In web design, you have to be careful and wise because even the smallest effect can change the overall user experience. There may be a lot of plugins or add-ons you can choose from and use to achieve beautiful effects, however, some of them are premium.Have you ever encountered of an image especially long screenshot, that automatically scrolls when hovered? They are called preview scrolling. Stunning, isn’t it?

Are you thinking of implementing them to your site? Well then, end your thoughts now and follow this simple and easy tutorial.

Let’s Get Started

First and most importantly, you have to set the image as a background of the “<div>” or container. (Note: Failing to do so will not be possible for scrolling preview to take effect).

.templates-thumb is a class that I placed inside the container where I set the background image for targeting purposes.

I set a specific height on the parent container of .templates-thumb which is the .featured-blog-image. as you can see i used pixel to give a container a fixed height.

On the .templates-thumb container, add this css in order to make it visible.

To implement the scrolling effect, add this on .templates-thumb:hover.

Note: You can set any class (of any name) you want on the container.

That’s it! Seems like it’s your turn now. Go start coding your site’s scrolling preview…


<div class="feature-blog-image">
<div class="templates-thumb" style="background-image:url(×1815.jpg);"></div>


.feature-blog-image {
height: 320px !important;

.templates-thumb {
height: 100%;
width: 100%;
background-position: top center;
background-size: cover;
border-radius: 10px;

.templates-thumb:hover {
-moz-transition: background-position 4.5s linear 0s;
transition: background-position 1.5s linear 0s;
background-position: center bottom!important;

This Post Has 4 Comments

  1. shai

    Is it possible to update the code in a way that when you move out the mouse – that will be a out Scrolling back to the top?

  2. John Rambutan

    use html widget to insert html code, and then add that css code to custom css on advanced tab

  3. mibro

    Ok, but how do I do this in Elementor? 🙂

  4. Jan Donaj

    I dont get it :/

Leave a Reply


Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template