Section Background Image Zoom on Hover in Squarespace - Easy Custom CSS Plugin
If you’ve ever looked at a beautiful hero image on a site and wished it had that gentle “zoom in” feel when visitors hover, you’re not alone. It’s one of those small details that makes a Squarespace site feel polished, intentional, and alive - like the difference between a flat cabin sketch and a finished log home with depth and character.
At Log Cabin Digital Design, we build custom CSS plugins exactly like this one to help our clients create memorable experiences without breaking the bank or fighting Squarespace’s built-in limits. Today we’re sharing our Section Background Image Zoom on Hover plugin - completely free, easy to install, and ready to elevate any page on your site.
Why Add a Background Image Zoom Effect?
Increases dwell time - subtle motion draws the eye and encourages scrolling.
Highlights your story - great for service pages, portfolio heroes, or brand storytelling sections.
Mobile-friendly by design - works seamlessly on every device.
No third-party bloat - pure CSS, lightning-fast load times.
Squarespace gives you powerful image tools, but native section background hover effects are still limited. That’s where our plugin steps in.
View live demo here.
How the Plugin Works
When a visitor hovers over the section, the background image gently scales up (you control the amount and speed). It’s smooth, elegant, and never distracts from your content.
Installation is literally three steps:
Go to Design > Custom CSS in your Squarespace dashboard.
Paste the code below.
Replace SECTION_ID_HERE with your actual section ID (we’ll show you how).
// Section Background Image Zoom on Hover //
SECTION_ID_HERE img {
transform: scale(1) !important;
transition: all ease-in-out 1s !important;
}
SECTION_ID_HERE:hover img {
transform: scale(1.2) !important; // amount of zoom //
transition: all ease-in-out 1s !important; // speed of zoom //
}
Pro tip: Use the Squarespace ID Finder to find your section ID, and add it where it says SECTION_ID_HERE in the code. It will look something like this: section[data-section-id="66f200ee8f72710383ea3cad"]
Or use our free Care Plans and we’ll handle it for you.
Ready to Make Your Site Feel More Alive?
Whether you’re launching a new site or refreshing an existing one, this plugin is a quick win that punches way above its weight.
Book a Call today and let’s talk about how we can weave this (and dozens of other custom touches) into your perfect Squarespace build. Or dive straight into our Care Plans for ongoing tweaks and peace of mind.
Customizations
Adjust the speed of the zoom by changing the number on the “transition” line.
Adjust the amount of zoom by changing the number on the “transform” line.
License
This plugin comes with an Unlimited Use License. View License Terms
Was this post helpful? Consider buying me a coffee to say thanks!