How to make a Scrolling Screenshot Preview Effect

Here is how to do a very simple and quite popular effect to display screenshots.

It's all about the background-position CSS property.

Step 1

Add a Div with a background image.
Then add a class to the Div.

Step 2

Select the class and apply a size to the Div :

Step 3

The most important is the background position of the image.
We center the background horizontally (left=50%), and put it at the top (top=0):

Step 4

Add a transition:

Step 5

Now we have to create the hover effect.
Select the hover state:

Step 6

And simply change the background position.
Left:50% and Top:100%

Note

You can add this CSS if you want to change the mouse cursor on hover:

.screenshotfx {
    cursor: pointer
}

Here are a couple of examples you can download from my design set Unlimited Elements