Change Image on Hover on Squarespace [Expert CSS Tutorial]
A cool feature I use on Squarespace websites is adding a hover effect to images.
This means when a user hovers over an image it changes to a new image. A common use case is before and afters or a meet the team section.
In this tutorial I’ll talk you through the CSS you need to add this to your website, although you need to bear in mind that this only works on desktop and you won’t be able to add the hover effect to your images on mobile.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
To add the effect to your image you’ll firstly need to add the second image behind the existing one. Simply add the image to the section and place it over the original image and then move it to behind.
Once you’ve done this you can add the code to create the effect.
Head to Website > Pages > Website Tools > Custom CSS and use the Squarespace Block ID Finder plugin to get the block ID for your image and paste this into your CSS box and then add the following code:
#block-id {
&:hover {
opacity: 0;
transition: 0.5s;
}
transition: 0.5s;
}
The transition inside the brackets refers to the transition “in” and the one outside refers to the transition “out”. If you don’t want to bother with a transition out simply remove this from the code.
You can also play around with the speed of the transition by changing the unit (in this case 0.5).
Once you’re happy with how your hover transition looks, hit save and you’re all done!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
