How to Add a Zoom Hover Effect to Squarespace Images

content block

Apr 29

This hover effect is such a fun way to add some personality to your website—and it’s super easy to set up. In just a few steps, you can create a zoom-in animation that makes your image blocks feel interactive and modern. Below, I’ve broken down the exact steps, including optional adjustments and how to make it work for list section images too.

✨ Quick Note: This tutorial works for image blocks—no matter if they're set to fit, fill, or shape design styles. If you're working with gallery sections, blog thumbnails, or list sections, scroll down for a advice on how to target those image types!

Add the Zoom Hover Effect to Image Blocks

Then paste this code into the editor; this code tells the browser to scale up the image inside the image block to 120% when a visitor hovers over it.

.sqs-block-image:hover img {
  transform: scale(1.2);
}

Make the Entire Block Zoom (Not Just the Image)

If you want the entire image block, including any shape styling, to zoom in—not just the image itself, remove the img part of the selector, with a code like this example below. A quick heads up: if your image blocks are close together, this version may cause overlapping. Test it out and see what looks best!

.sqs-block-image:hover {
  transform: scale(1.2);
}

Customize the Zoom Level

You can change the scale value to anything you like:

scale(1.2) = 120% (default)
scale(1.5) = 150%
scale(3) = 300% (go big or go home 😉)

Apply the Zoom Effect to One Specific Image Block Only

Want to use this effect on just one image block instead of all of them? Totally doable—you’ll just need to target that specific block using its unique Block ID. Learn more about that code technique in this article: insidethesquare.co/squarespace-id-finder

Apply the Zoom Effect to List Section Images

Image blocks in list sections (like team members or featured posts) use a different CSS selector. For those, use this code instead.

.list-item: hover img {
  transform: scale(1.2);
}

You can get other selectors for the 20+ different image types in Squarespace using Custom Codey, my Squarespace code AI, available now at CustomCodey.com

image