5 Squarespace CSS Image Hover Effects With Examples
In this guide, we’ll share how you can use CSS snippets to make your images interactive. We’ll explore hover effects like zoom, fade, and blur.
Affiliate disclosure: Some of the links in this article are affiliate links, marked with an asterisk (*). Studio Founded may receive a commission from qualifying purchases made through these links, at no additional cost to you. You can read our full affiliate disclosure here.
Using the Squarespace ID finder to identify block IDs.
How to Identify a Block ID in Squaresoace
To apply the hover effects in this guide, you’l first need to find your image’s Block ID.
You can do that by:
Installing the Squarespace ID Finder extension in Google Chrome.
Open your Squarespace website and open the Squarespace ID Finder extension (If you’re new to Squarespace, you can start a free 14-day trial here*).
It will show you the ID of each Block.
Click the ID of the image you want to style, and the ID will copy to your clipboard.
Replace #block-yourBlockID in the CSS snippets below with your Block ID.
Always save and refresh your site after updating the CSS to see the new styles take effect.
If you would like a hover effect to apply to all images on your site, you don’t need to add a Block ID, and can omit any example Block IDs from your code.
The Squarespace custom CSS panel.
How to Add Custom CSS in Squarespace
To add a CSS snippet to your website, start by:
Opening your Squarespace Dashboard
Go to Website > Pages > Custom Code > Custom CSS.
Copy one of the CSS snippet from this post and paste it into the Custom CSS panel.
Replace #block-yourBlockID with your own Block ID.
Click Save, then refresh the page.
Let’s move onto explore the hover effects.
1. Squarespace Image Zoom on Hover
This hover effect adds a subtle zoom movement to draw attention to important images.
As written, this code snippet increases the image size by 10% on hover.
Adjust the scale(1.1) value for a stronger effect. For example, scale(1.2).
/* Image Zoom on Hover */
#block-yourBlockID img {
transition: all .8s ease;
}
#block-yourBlockID:hover img {
transform: scale(1.1);
}
2. Squarespace Image Opacity Change on Hover
This effect lowers your image’s opacity to 50% on hover.
You can adjust the opacity value. For example, you can use opacity: 0.2 for lower opacity. A value of 0 makes the image transparent, and 1 makes the image visible.
You can also change the timing on the transition property to change the animation speed, i.e. transitions: all .3s for a faster animation.
/* Change Image Opacity on Hover */
#block-yourBlockID img {
transition: all .8s ease;
}
#block-yourBlockID:hover img {
opacity: 0.5;
}
3. Squarespace Round Image Corners on Hover Effect
This hover effect rounds the corners of an image on hover.
You can adjust the border-radius value to shape the curve. For example, 10px for slightly rounded edges, and 50% for a circular image.
/* Round Image Corners on Hover */
#block-yourBlockID img {
transition: all .8s ease;
}
#block-yourBlockID:hover img {
border-radius: 20px;
}
4. Squarespace Black and White Image to Color on Hover
This effect makes an image greyscale and turns it full color on hover.
You can adjust the grayscale, for example a value of grayscale(50%) will make the image muted, and grayscale (100%) with make the image black and white.
/* Black and White Image to Color on Hover */
#block-yourBlockID img {
transition: all .8s ease;
filter: grayscale(100%);
}
#block-yourBlockID:hover img {
filter: grayscale(0%);
}
5. Squarespace Blur Image on Hover
This snippet blurs your image on hover.
Filter blur(5px) value controls the amount of blur. You can reduce the amount of blur with a value like blur(2px), or increase to blur(10px) for a stronger blur.
/* Image Blur on Hover */
#block-yourBlockID img {
transition: all .8s ease;
}
#block-yourBlockID:hover img {
filter: blur(5px);
}
Combining CSS Hover Effects
You can combine multiple hover effects. We recommend choosing 1-2 effects and using them as design accents, but don’t use too many as they can be distracting.
Hover Effect Accessibility
You can turn off hover effects who users who set their devices to reduce motion using this CSS:
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
#block-yourBlockID img {
transition: none;
}
#block-yourBlockID:hover img {
transform: none;
}
}
Replace#block-yourBlockID with the IDs of the blocks you added CSS hover effects to.
This CSS tells devices not to show motion to users with the Prefers Reduced Motion setting switched on.
FAQs
Q. Why should I add hover effects to my Squarespace site?
A. They add interaction, which makes a website engaging to explore.
Q. Can I use CSS on any Squarespace Plan?
A. Yes, access to the CSS panel is included with all Squarespace Plans.
Q. Do hover effects work on mobile?
A. No. Phones and tablets have no cursor, so hover interactions aren’t available. For movement on smaller screens, you can use tap or scroll-based animations.
Q. Will hover effects slow down my site?
A. These CSS snippets are very lightweight. The bigger issue is image size. Remember to resize your images before uploading them to Squarespace, and check your page speed with GTMetrix or Google PageSpeed Insights.
Shop our Collection
If you’d like a template with hover effects pre-coded for you, our Squarespace templates include 12+ pages (Home, Shop, Blog, Services, an more). You’ll also save 25% on your first year of Squarespace with an annual subscription.
Continue Reading
Shop Squarespace Templates
