Scroll Image on Hover

What You'll Create

A tall image that automatically scrolls from top to bottom when visitors hover over it. Perfect for showcasing full webpage screenshots, long infographics, or any vertical content that doesn't fit in a standard frame.

The Problem It Solves

When you want to show a full webpage screenshot or long vertical image, you're stuck either shrinking it to fit (losing detail) or showing only a portion. This technique creates a window into the full image that visitors can explore just by hovering.

Perfect For

Website design previews, Full-page screenshots, Long infographics, Menu displays, Timeline graphics.

What Makes This Different

The image container is set to a fixed aspect ratio with overflow hidden, creating a viewing window. On hover, CSS transitions smoothly animate the image's position from top to bottom over several seconds. In fluid sections, this is achieved with object-position, while classic sections use transform. You control the scroll duration for faster or slower reveals.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Tall/vertical image, Image Block. For Fluid sections: Design set to Fill

• Toolkit Title: Scroll Image on Hover

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support