Portfolio Grid Border Overlay on Hover

What You'll Create

Portfolio grid items with thick decorative borders that animate inward from the edges when visitors hover. The borders start invisible and smoothly expand to a customizable width, creating a frame effect around each project thumbnail.

The Problem It Solves

Squarespace's portfolio grid offers limited hover feedback—just basic opacity changes or title reveals. If you want a more distinctive, editorial hover effect that frames each project dramatically, there's no native option for animated border overlays.

Perfect For

Design portfolios, Photography galleries, Agency work showcases, Creative project displays, Art exhibition websites

What Makes This Different

This technique creates borders that grow inward from all four edges simultaneously, rather than simply appearing or fading in. The animation feels architectural—like a frame closing around the image. You can assign different border colors to specific grid positions, so alternating items can have contrasting frames for a more dynamic, curated gallery feel.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Portfolio section with Grid Basic layout

• Toolkit Title: Add border overlay to portfolio grid 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