How to Zoom in Images on Hover in Squarespace

Adding an image zoom effect on hover is one of the simplest ways to make your Squarespace website feel more interactive and professional. It gives your visuals depth and motion—perfect for portfolios, product galleries, and blog thumbnails. While Squarespace offers beautiful design flexibility, it doesn’t include a built-in “zoom on hover” feature. Luckily, with a few lines of CSS, you can easily achieve this modern effect.

In this guide, I’ll show you how to add a zoom-in image hover effect on your Squarespace website, step-by-step. We’ll use custom CSS, test it across devices, and I’ll share a few pro tips to make it look polished and on-brand.

Why Add an Image Zoom Effect in Squarespace?

A hover zoom effect does more than just look cool—it enhances user experience and visual appeal. Adding this effect can:

• Make your images feel more interactive

• Highlight details in product or portfolio photos

• Add a touch of motion for a modern design feel

• Keep your website looking clean while still feeling dynamic

As a Squarespace designer, I often use small visual enhancements like this to make sites feel more custom and premium—without needing complex code or third-party plugins.

Step 1: Identify the Image Type

Before adding any CSS, it’s important to know where this effect will work.

This code only applies to standard Image Blocks in Squarespace (images you manually add using the “+” button → “Image”).
It does not work for:

• Product grid images

• Blog cover images

• Gallery sections

Step 2: Add the CSS Code

To apply the zoom-in hover effect, follow these steps:

1. Go to your Squarespace dashboard.

2. Navigate to Design → Custom CSS.

3. Paste the following code:

.sqs-block-image img
{ transition: ease-in-out 1.6s !important; }
.sqs-block-image:hover img {
transform: scale(1.15) !important; }

What This Code Does:

• transition: ease-in-out 1.6s creates a smooth, gradual zoom effect.

• transform: scale(1.15) enlarges the image slightly when you hover over it.

• The !important ensures this CSS overrides any default Squarespace styling.

Step 3: Preview the Effect

Once you’ve added the code, hover over any image block on your website.
You’ll notice the image smoothly zooms in, then returns to normal when you move your cursor away.

If you’d like to adjust the speed or intensity:

• To make it zoom faster, reduce 1.6s to something like 0.8s.

• To make the zoom stronger, increase scale(1.15) to scale(1.2).

• To make it more subtle, reduce it to scale(1.05).

Experiment with these numbers until the effect matches your site’s vibe.

Step 4: Keep It Clean and Consistent

A key part of good Squarespace design is consistency.
If you use this zoom effect on some images but not others, it can feel unbalanced. I recommend applying it across all image blocks that share a similar layout (for example, all portfolio images or all homepage visuals).

Also, avoid using large zoom values that might make images appear pixelated or misaligned within their containers.

Important Notes

Before you apply this to your site, keep these points in mind:

• Works perfectly with standard image blocks

• Does not work with blog images, galleries, or product grids

• Those elements require separate code targeting their unique classes

Keeping expectations clear ensures you get the effect you want without frustration.

Why This Matters

Even small visual effects like hover zooms can have a big impact on how users perceive your Squarespace site. It shows attention to detail, adds a professional polish, and makes your content feel more interactive—without overwhelming your clean layout.

These subtle enhancements help your brand stand out while keeping your Squarespace website modern and visually engaging.

Final Tips

Use a consistent zoom level across your site for a cohesive design.

• Test the effect on desktop and tablet views (hover effects don’t apply on mobile).

• Combine this effect with other small CSS tweaks for a polished, professional feel.

• Always double-check that images remain sharp after scaling.

Need Expert Squarespace Help?

Looking to create a clean, high-performing Squarespace website that reflects your brand and delivers results?
I provide expert Squarespace web design, advanced layout customization, and CSS enhancements to ensure your site looks professional, functions seamlessly, and aligns with your goals.

Whether you need precise design refinements or a complete Squarespace build, I deliver modern, responsive, and well-structured websites tailored to your business.

Book a free consultation call to discuss your Squarespace project in detail.