How to Add Image Hover Effects with Links Using Default Squarespace Classes (7.1)
If you are putting together a beautiful site on Squarespace 7.1, one of the fastest ways to make your design and user experience more powerful is by using image hover effects (especially on images with clickable links). And these little visual snippets can help make your site feel more professional, more dynamic, and more modern.
Why does this matter?
When visitors hover over an image and it zooms, fades, or an overlay shows, it adds
A very obvious indicator that the image can be clicked
A more seamless browsing experience
And a more interactive website and users who stick around longer
In this tutorial, you will learn:
How to add hover zoom effects using default Squarespace image classes
Applying Image Hover Style With No Plugins or Custom HTML
Customizing hover effects for desktop and mobile
And how to ensure that your image links work as advertised
Whether you are displaying a portfolio, a product gallery, or a collection of blog images, this article will show you how to quickly create professional hover animation on your images using clean, easy-to-read CSS that plays well with Squarespace’s native image blocks.
Why Should We Use Image Hover Effects?
Before we jump into the steps, it’s important to understand:
Why even add image hover effects?
Here’s why:
| Benefit | Why It Matters |
|---|---|
| Increases Interactivity | Hover effects make the site feel alive instead of flat and boring |
| Improves Visual Engagement | Visitors naturally pay more attention when images react |
| Provides Link Feedback | Hover signals that the image is clickable, improving navigation clarity |
| Adds Professional Polish | Websites with subtle effects feel modern and well-designed |
| Boosts User Experience (UX) | Good micro-interactions make browsing smoother, leading to better engagement and conversions |
| Mobile-Friendly Enhancement | Touch interaction still works properly; no broken links |
In short, Hover effects make your site feel higher-end, more intuitive, and more enjoyable to explore.
Step-by-Step: Add Image Hover Effects Using Default Squarespace Classes
Step 1: Know the Default Squarespace Image Class
Squarespace automatically adds these classes to normal image blocks:
| Image Type | Default Class |
|---|---|
| Image Block | .sqs-block-image img |
| Product Thumbnail | .product-list-item img |
| Gallery Block Images | .sqs-gallery-design-grid img |
We’ll mainly target .sqs-block-image img for normal page images.
Step 2: Add a Code Block (If Needed for Manual Linking)
If your image already has a link, there's no need to add anything.
If not, make sure inside the Squarespace editor:
You select the image block
Set a "Clickthrough URL" inside the Image Editor
That makes the image naturally clickable.
Step 3: Add Custom CSS for Hover Effect
Go to Design > Custom CSS
Paste this CSS:
Simple Zoom Effect on Hover
/* Hover effect on all Image Blocks */
.sqs-block-image img {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.sqs-block-image:hover img {
transform: scale(1.05); /* Zoom slightly */
opacity: 0.9; /* Optional slight fade */
}
This creates
A smooth zoom-in effect on hover
A slight opacity fade for a professional feel
Step 4: Customize the Effect (Optional)
You can create different hover styles:
Example: Dark Overlay on Hover
If you want a dark overlay effect on images:
.sqs-block-image {
position: relative;
overflow: hidden;
}
.sqs-block-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.3); /* Soft black overlay */
opacity: 0;
transition: opacity 0.4s ease;
z-index: 2;
}
.sqs-block-image:hover::after {
opacity: 1;
}
Now, when users hover over the image, a semi-transparent overlay appears,
keeping the link behavior intact.
Step 5: Mobile Optimization (Optional)
Hover effects don’t work the same way on mobile because there’s no "hover" — only tap.
But you can still make mobile behavior smoother:
@media only screen and (max-width: 767px) {
.sqs-block-image:hover img {
transform: scale(1.02);
}
}
Less aggressive zoom on small screens = better UX.
Final Thoughts: Small Hover Effects, Big Visual Impact
Adding image hover effects in Squarespace 7.1 is one of the simplest yet most effective ways to instantly improve your site's design and interactivity, no plugins, extra code, or complicated setups required.
By applying just a few lines of CSS targeting Squarespace's default image classes, you can:
Highlight clickable images more clearly
Make your site feel more modern and dynamic
Increase visual engagement without overwhelming the design
Ensure smooth experiences across desktop and mobile\
Whether you're running a portfolio, an eCommerce store, or a blog, these hover interactions offer the subtle polish that helps visitors stay longer and interact more confidently.
FAQ: Image Hover Effects with Links in Squarespace 7.1
1. What are image hover effects, and why are they important?
Image Hover effects are animations shown when the mouse moves over an image. In Squarespace 7.1, these are the effects that work:
Let the user know the image is clickable
Get the site looking interactive and professional
Enhance engagement with the end user and navigation clarity
2. Would I have to use a plugin or write custom HTML to do the hover effects?
No. You can add hover effects to Squarespace images with Squarespace’s standard image classes and just a few lines of custom CSS. This guide will highlight how to do it without plugins, developer mode, or third-party code.
3. Which images can I apply hover effects to?
You can apply hover effects to:
Standard image blocks: .sqs-block-image img
Product thumbnails: .product-list-item img
Gallery images: .sqs-gallery-design-grid img
This tutorial mainly focuses on .sqs-block-image img, which applies to regular image blocks used across pages.
4. How do I make sure my image is clickable?
So it your image is a link:
Click on the picture in Squarespace editor
In the Image Block settings, place a “Clickthrough URL.”
This way, the image operates as a link and also has a hover effect, providing visual feedback.
5. What kind of effects can I apply on hover?
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 (e.g., darkened layer using::after)
You can combine these for a layered look.
6. Will these hover effects work on mobile?
Not in the traditional sense. Mobile devices do not have hover capability, but
You can simulate subtle effects using @media queries
A gentler scale, like transform: scale(1.02) works better on small screens.
The image still remains clickable even if no animation shows.
