How to Use Squarespace “Hover: Background” Portfolio Layout
In the contemporary world of web design, minimalism meets movement. The “Hover: Background” layout for Portfolio pages is one of the most visually striking features available in Squarespace 7.1. It turns a basic list of projects into a dynamic, cloth-like feel that is guaranteed to add some cinematics to your list of related project links on hover.
For any creative professional or business owner seeking to create an exceptionally visual landing page, this layout is ideal.
What's the "Hover: Background" Layout?
The “Hover: Background” layout is built-in to the Portfolio Grid and:
Displays a list of project titles
On hover, a background image covers the entire container.
Applies the cover image of each project as the background
Produces a smooth and cinematic effect — no tweaking code is necessary
It's ideal for:
Photography categories
Design case studies
Editorial content
Product or service collections
How to Enable the “Hover: Background” Layout
Follow these simple steps using Squarespace 7.1's built-in tools:
Step-by-Step Guide
Add a Portfolio Page
Go to Pages → + → Portfolio
Name it something like “Work” or “Projects”
Add Projects
Click “+” to add a new Project Page
Upload a Cover Image — this becomes your background on hover
Give your project a title (this is the hover text)
Add descriptions or full content inside the project if needed
Edit Portfolio Layout
Hover over your Portfolio Section → Click Edit
Click the Pencil icon on the grid
Under Layout, choose:
➤ Hover: BackgroundCustomize the Design
Adjust overlay color, text style, or alignment
Fine-tune the image focal point to control how the background displays
Save Your Changes
How It Looks
They see a plain list of text links
When they hover over a link, the background image changes smoothly
The shift is graceful, engaging, and contemporary
When you click on a project, you are taken to a full detail page
✔ Great for full-screen landing pages
✔ Let's go perfectly on desktop and mobile
✔ 100% made with Squarespace default, no plugins and coding involved
Mobile Experience
On mobile, hover changes to “tap-to-preview”
Backgrounds animate on tap and layout stack vertically
And that sleek, touchably-friendly effect — no extra setup required
Use Case Ideas
| Industry | Use This Layout For... |
|---|---|
| Photographers | Show gallery previews by genre (weddings, travel, portraits) |
| Designers | Display case studies or categories visually |
| Agencies | Introduce your services with hover visuals |
| Fashion Brands | Show seasonal collections or lookbooks |
| Writers/Bloggers | Feature categories with cover imagery |
Why This Layout Works
✔ Interactive without overwhelming
✔ Visually driven and on-brand
✔ Fast to build with no technical skills
✔ Elegant design that feels custom-built
✔ Responsive across all devices
Final Thoughts
The “Hover: Background” on Squarespace 7.1 is one of the most useful and innovative design hacks for non-coders. It enables you to make a striking visual introduction to your work. Just add Projects and enable the layout in a couple of clicks.
No matter if you are a photographer, creative agency, content strategist, or simply just looking for a way to tell your story with a twist, this layout offers the possibility to visually represent your story just at a hover.
Frequently Asked Questions
-
No. This design is integrated into Squarespace 7.1 Portfolio settings. And you can easily enable it with just a few clicks by editing your Portfolio Page without any code.
-
The effect uses the Cover Image of each project. You hover over a project title, and the Cover Image appears as background.
-
Tap No hover on mobile, so the background changes on tap. It makes the layout fit a vertical stack, keeping it clean and touch-compatible.
-
Yes. You can also tweak the overlay color, transfer the text from left-aligned to right-aligned, change the font styles, and even the focal point of the images so they look just right.
-
It’s perfect for all: photographers, designers, agencies, fashion brands, and bloggers. Any portfolio that has images at its core will benefit from this dynamic background interaction.
