Scrolling Image Effect with GenerateBlocks

The full-length screenshots of websites we’ve created are great — but having a giant, skinny image on a page is a bit of a nightmare to design around. The scrolling image effect …

Kyle Van Deusen

Published:

Filed Under:

Quick Tip

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

screen recording 11 26 2021 at 6.25 am
This content contains affiliate links. View our affiliate disclaimer.

The full-length screenshots of websites we’ve created are great — but having a giant, skinny image on a page is a bit of a nightmare to design around.

The scrolling image effect is a nice way to keep the image constrained to manageable size, while allowing people to see the full screenshot, from top to bottom, by allowing the image to scroll when you hover over it.

screen recording 11 26 2021 at 6.25 am

I recently applied this effect to my new “simplified” portfolio page on my agency’s website and have had a couple people in our community asking how it was done.

Thankfully, it’s quite easy, and requires just a small bit of completely customizable CSS (which I’ll be sharing below).

There’s likely ways you can do this in your page builder of choice, but since I built with Generate Blocks, that’s what I’ll be using for this demonstration.

Step 1 – The Structure

I’ll assume you want to do something similar to the example I provided above from my portfolio, so the first thing we need to do is create the structure for this layout.

For that, we need to create a container, and inside it put a grid with 2 columns.

The column on the left will hold our image, and the column on the right will hold our text.

step1 a

Select the container of your left column inside the grid, and under the “Backgrounds” settings insert the image URL from your source image (the image you want to scroll on hover), then use the following settings:

  • Size: full
  • Selector: Element
  • Image Opacity: 1
  • Size: cover
  • Position: top center
  • Repeat: no repeat
  • Attachment: scroll
step 1 b

Finally, under the “Advanced” tab, we need to assign a class to this container. In my example (and the CSS provided below) I used the class “scroll-image”.  You’re welcome to change that to whatever you’d like, but make sure to change it in the CSS too!

Note: You’ll want to go ahead and put some content in the right hand column. The height of your columns will be determined by how much content is in there, and at this point (assuming it’s still blank) your scrollable image won’t show up. 

It should look something like this:

step 1 c

Save your page, and let’s move on to the CSS.

Step 2 – The CSS

Now, we have to add the CSS to make the scroll happen when you hover over the image.

All you need to do is copy/paste the CSS below into your website wherever you store additional CSS (this could be in your child theme’s stylesheet, or simply in the customizer). 

Here’s what you’ll copy & paste:

.scroll-image {
background-position: 0 0;
-webkit-transition: background-position 3s ease-in-out;
-moz-transition: background-position 3s ease-in-out;
-ms-transition: background-position 3s ease-in-out;
-o-transition: background-position 3s ease-in-out;
transition: background-position 3s ease-in-out;
}

.scroll-image:hover {
background-position: 0 100%;
}

Let’s talk about the CSS

The CSS for this is pretty simple, but you may need to fine-tune it a bit. The speed in which the image scrolls on hover is determined by the transition time in the CSS (in the example above it’s set to 3 seconds).

For short images, this might be much too slow. 

For extremely long images, this might be way too fast.

You’ll just need to play with this number and adjust it to your preference.  

The longer the image, the longer time you’ll want your transition to be.

Whatever duration you choose, you’ll have to adjust in the CSS in all the different fallbacks for the transition duration (everywhere it says “3s” in the CSS I supplied to you).

That’s it!

Everything should be working now!  Keep in mind, this effect will only display on the front end of your site (not inside the editor). 

Of course, you don’t have to use this exact same implementation — this same idea could be used in a variety of applications.

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

Latest Events

February 18th, 2025

Freelancer to Agency

January 14th, 2025

Getting Started with Figma

Master the essentials in this live session—tools, grids, styles, components, and more. Build layouts while learning hands-on.

January 3rd, 2025

Happy Hour — January 2025

Join your friends from The Admin Bar in our monthly hang out call on Zoom!
Care Plan Toolkit

Save time, boost profits, and confidently manage client websites with proven tools, tips, and resources.

Bento Toolkit
The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

More Articles

Angry Boss

Red Alert: Spotting the Warning Signs of an Unhappy Client & How to Handle Them

Dealing with an unhappy client? In this blog, learn how to identify an unhappy client and the best way to handle the situation and keep your customers happy.

Barfly Profile Matt Schwartz

Member Spotlight: Matt Schwartz

Matt Schwartz is the founder of Inspry, an 8-person agency based in Atlanta, GA, that’s been …

Sad Despaired Latin Young Brunette Lady In Casual 2023 12 15 00 38 45 Utc

6 Steps to Writing Web Copy That Sells, Not Yells

Discover persuasive writing strategies you can use to create irresistible copy. Write engaging content that’ll turn casual visitors into keen customers.