Page Background Color Change on Image Hover

What You'll Create

An interactive effect in Squarespace where hovering over images triggers a smooth 0.5-second background color transition across the entire section. Different images can trigger different background colors based on filename keywords.

The Problem It Solves

Creating interactive, color-changing backgrounds typically requires JavaScript. This CSS-only technique uses the modern :has() selector to detect image hover states and apply section-wide color changes without scripting.

Perfect For

Interactive portfolios, Color-coded product displays, Creative showcases, Mood-based galleries, Interactive service pages

What Makes This Different

Targets images containing specific keywords like 'green' in their filenames. When hovered, the entire section background smoothly transitions to a matching color over 0.5 seconds. Images are layered properly to ensure hover detection works. Color values are easily customizable per filename keyword.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Images with keyword in filename (e.g., 'green'). CSS in Custom CSS panel.

• Toolkit Title: Change page background color on image 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