Panoramic Background Pan on Hover

What You'll Create

A wide panoramic background image that pans horizontally when visitors hover over the section. The image slowly scrolls from one side to the other, revealing the full panorama through an animated viewport.

The Problem It Solves

Panoramic or very wide images get cropped awkwardly in standard section backgrounds. Squarespace centers and covers the image, hiding the edges. This technique lets visitors see the entire image through a smooth horizontal animation triggered by hover.

Perfect For

Landscape photography, Cityscape headers, Venue showcases, Real estate hero sections, Travel/destination sites.

What Makes This Different

The technique first adjusts the background image sizing to prevent default cropping, then applies CSS keyframe animation that shifts the object-position from left to right. The animation pauses by default and plays only on hover, giving visitors control over exploring the panorama.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Section with wide/panoramic background image uploaded

  Toolkit Title: Panoramic Section Background Image

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