Creating Scrolling Screenshot Preview Effect in Elementor - Elementor Resources 605275

This website is not affiliated with Elementor.

Creating Scrolling Screenshot Preview Effect in Elementor

Creating Scrolling Screenshot Preview Effect in Elementor

November 28, 18

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…

HTML

<div class="feature-blog-image">
 <div class="templates-thumb" style="background-image:url(https://elementorresources.com/wp-content/uploads/2018/08/charity-foundation-500x1815.jpg);"></div>
</div>

CSS

.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;
}

Pin It on Pinterest

Shares
Share This