Interactive Image Hotspots with Auto-Layout Lists
What You'll Create
An interactive image in Squarespace with clickable hotspot markers that users can tap to reveal information. This technique repurposes Squarespace's Auto-Layout List Section slider dots as customizable hotspots, positioning them precisely over a background image. Each dot becomes a clickable point that can trigger content reveals or navigate through information panels.
The Problem It Solves
Squarespace doesn't have a native image hotspot feature. Most workarounds involve absolute-positioned buttons or complex JavaScript plugins. This technique cleverly uses the existing slider navigation dots—already functional and accessible—and transforms them into positioned markers through CSS. You get click functionality for free while controlling exactly where each marker appears.
Perfect For
Product feature callouts showing key details on hero images, interior design portfolios highlighting furniture or decor elements, interactive maps marking locations or points of interest, real estate listings with room-by-room navigation, service area showcases with regional information.
What Makes This Different
Instead of building hotspot functionality from scratch, this technique leverages Squarespace's built-in slider dot navigation. The styling transforms standard horizontal dots into precisely-positioned markers on your image. Each dot can be placed anywhere on the image with pixel-perfect control, and the existing slider animation handles content transitions automatically.
Details
Section Type: Fluid Engine
Code Type: CSS
Prerequisites: Auto-Layout List Section with background image. Individual dot positioning requires custom CSS per hotspot.
Toolkit Title: Image Points
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