How to Add Zoom on Hover to Squarespace Image Blocks
A little movement can change how an image feels on your website. A gentle zoom can draw attention to a project preview or add interest to a service page without introducing a complicated animation.
To create a Squarespace image zoom on hover effect, you can add a short CSS snippet to your Custom CSS panel. This tutorial uses a 15% zoom with a gradual transition and applies it to matching standard Image Blocks across your website.
You don’t need a plugin or a separate block ID for each image. You do need to check which images the code affects and how they look when enlarged.
What Images Does This CSS Target?
This snippet targets images inside Squarespace’s standard Image Blocks—the blocks you add while editing page content by choosing Add Block → Image.
It does not specifically target product grids, blog thumbnails, or gallery sections. Those use different structures and need their own settings or selectors. However, a standard Image Block placed inside a blog post can still match this code. The block type matters more than the page where it appears.
Because there is no page, section, or block ID in the snippet, it applies across your site wherever the selectors match. That can include Image Blocks you would prefer to keep still, such as logos or badges.
Also, Squarespace does provide built-in zoom and hover options for certain store images. This tutorial is about styling standard Image Blocks, rather than replacing those product-specific features. Squarespace’s guide to product image effects
Step 1: Choose Your Images
Open the page you want to improve and check that your images are standard Image Blocks.
Start with a few photos that have room around the subject. If a face, product, or important detail already sits close to the edge, enlarging the image may crop it more tightly or make it extend beyond its original space, depending on the layout.
For example, a photograph introducing a service may suit a subtle zoom. A diagram with small labels usually benefits more from staying still and readable.
Step 2: Add the Image Hover Zoom CSS
Open your site’s Custom CSS panel. Paste the following snippet after your existing CSS, outside any other rule, and save your changes. Squarespace documents this workflow in its Custom CSS guide.
.sqs-block-image img {
transition: ease-in-out 1.6s !important;
}
.sqs-block-image:hover img {
transform: scale(1.15) !important;
}There are no placeholder IDs to replace. The code uses Squarespace’s Image Block class to select matching images automatically.
How the Code Works
The first rule adds a 1.6-second transition. The ease-in-out timing makes the movement start and finish gradually. Because this shorthand does not name a specific property, it defaults to transitioning all eligible changing properties—not only the zoom. MDN’s transition reference
The second rule applies scale(1.15) when the pointer hovers over the Image Block. This increases the image’s rendered width and height to 115% of their original size. It is a visual transformation rather than a change to the block’s layout dimensions. MDN’s scale reference
The !important declarations give these styles priority over ordinary competing declarations. They do not guarantee that every conflicting site style will be overridden.
Step 3: Preview the Effect
Open the page outside the editor and move your pointer over an Image Block. On a compatible layout without conflicting styles, the image should enlarge gradually and return to its previous appearance when you move away.
Review more than one page because this CSS applies across the site. Check three things:
Image edges: Does the enlarged image stay within the intended frame or overlap nearby content?
Image quality: Does the subject remain sharp and comfortably framed?
Existing interactions: Do image links, lightboxes, and other animations still behave as expected?
This snippet does not include a clipping rule. Whether the zoom stays inside a fixed frame depends on the image’s existing containers and their styles. If it overlaps nearby content, reduce the scale or adjust the relevant image wrapper for that layout.
Step 4: Adjust the Zoom and Speed
The two values you’ll change most often are the scale and the transition duration.
For a quieter effect, change scale(1.15) to scale(1.05). For a more noticeable zoom, try scale(1.2). Larger values can exaggerate cropping and make low-resolution images appear softer.
To speed up the animation, change 1.6s to 0.8s. The original duration creates a slow movement, which may suit some designs but feel delayed on others.
Optional: Animate Only the Zoom
If you want the transition to apply specifically to the image transform, replace the original transition line with:
transition: transform 0.8s ease-in-out !important;This is an optional refinement to the original code. It also makes the animation faster, so keep 1.6s instead if you prefer the original timing.
Does Image Zoom on Hover Work on Mobile?
Hover is mainly useful when someone uses a mouse or trackpad. Touchscreens can handle hover differently: an effect may not appear, may appear briefly after a tap, or may remain active until another element is touched. It is more accurate to describe the behavior by input method than simply by screen size. MDN’s hover reference
Treat the zoom as a decorative enhancement. Visitors should be able to understand the image and use any associated link without triggering the animation.
Test on a real phone as well as a desktop browser. A narrow desktop preview helps you check spacing, but it does not fully reproduce touch interaction.
Why Isn’t My Squarespace Image Zoom Working?
1. The Image Is Part of a Different Element
If you are testing a gallery image, product grid, or blog thumbnail, the Image Block selector may not match it. Check the element type before changing the zoom values. A stronger scale cannot fix a selector that does not target the image.
2. Another Style Controls the Image
An existing animation or custom CSS rule may already control the image’s transform or transition. Review any earlier zoom snippets before adding another. Combining several effects on the same image can produce unexpected movement.
3. The Code Was Pasted Inside Another Rule
Make sure both rules sit outside other CSS rules and media queries unless you intentionally want those restrictions. Copy the braces along with the declarations, then save and refresh the page.
Frequently Asked Questions
-
Yes. Use a Squarespace Block ID Finder to identify the image’s block ID, then replace .sqs-block-image in both selectors with that ID. For example, the selectors would become #block-YOUR-ID img and #block-YOUR-ID:hover img. Use this instead of the broad snippet if you only want one block to zoom.
-
No. This customization uses CSS in Squarespace’s built-in editor. There is no JavaScript setup or plugin installation. The result still depends on the image layout and any other styles already applied to your site, so review the finished page before using it widely. text goes here
-
No. The snippet only changes how the image looks when hovered. If you want an image to open a project, service page, or another destination, configure its link separately. Make that destination clear with supporting text or a visible call to action.
-
Treat this as a visual design update, not a ranking tactic. It does not replace useful content, descriptive image alt text, or clear page structure. Use it when it improves the presentation of your images, without promising higher rankings or more enquiries from the animation alone.
Final Thoughts
A Squarespace image hover effect works best when it supports the design around it. Keep the zoom comfortable, choose a speed that suits your site, and check that important details remain visible.
Consistency matters within groups of similar images, but every image does not need to move. Use the effect where it adds interest and keep the rest of the page easy to browse.
Building or improving a Squarespace website? A polished design is all about getting the details right. Book a free call with me to discuss your website, your goals, and how I can help turn your ideas into a professional Squarespace website designed to convert visitors into enquiries.
