How to add a hover effect to Squarespace image
If you are putting together a beautiful site on Squarespace 7.1, one of the fastest ways to improve your design and user experience is by using image hover effects, especially on images with clickable links.
In this guide, I’ll show you exactly how to add a hover effect to Squarespace image blocks, explain how the CSS works, and give you a few customization tips to make the zoom effect your own.
Why Add a Zoom Effect to Images in Squarespace?
Adding a hover zoom effect to images in Squarespace makes your website feel more interactive and modern. It can:
Draw attention to images in portfolios, galleries, or product pages.
Improve the user experience by creating subtle visual feedback.
Need Help with Your Squarespace Website?
Book a free kick-off call to discuss your project requirements in detail. Whether you're launching a new Squarespace website, redesigning an existing one, or looking to improve functionality and user experience, we'll help you explore the best options for your goals.
Step 1: Find Your Block ID in Squarespace
Each image block in Squarespace has a unique block ID. You’ll need this ID to apply CSS to a specific image.
Tip: Use Squarespace Block ID Finder to find the ID of the image block you want to style.
Step 2: Add Custom CSS in Squarespace
Go to Pages → Custom code → Custom CSS.
Paste the following CSS snippet to add a zoom effect to image blocks. Replace #block-ID with your actual block ID:
#block-ID {
img {
transition: 0.2s !important;
}
&:hover img {
transform: scale(1.1) !important;
}
}
Step 3: Apply to Multiple Images
If you’d like to apply the zoom effect to more than one block, simply add multiple block IDs separated by commas.
Final Tips for Using Image Zoom in Squarespace
Keep it subtle: Overly dramatic zooms can look distracting.
Test on mobile: Hover effects don’t work the same way on touch devices, so make sure your design still looks good on phones and tablets.
Stay consistent: Apply the effect to similar image blocks for a cohesive design.
Frequently Asked Questions
-
Image hover effects change an image’s appearance when a visitor moves their mouse over it. For linked images, they can help visitors recognise that the image is clickable and make navigation clearer.
-
No. You can create this image hover effect using a few lines of Custom CSS. You don’t need a plugin, custom HTML, or developer mode.
-
You can apply hover effects to standard image blocks, product thumbnails, and gallery images, although each may need different CSS selectors.
This tutorial focuses on regular image blocks. Their images can be selected using .sqs-block-image img, or targeted individually using their block IDs.
-
Some popular and easy-to-implement hover effects include:
Zoom-in scale: Using transform: scale(1.05).
Fade opacity: For a softer feel.
Overlay effects: For example, a darkened layer using ::after.
You can combine these for a layered look.
Final Thoughts
Adding a zoom effect on image hover in Squarespace is quick, easy, and a great way to make your website more engaging. With just a few lines of CSS, you can highlight your visuals, enhance interactivity, and impress your visitors.
