How to Show a Different Image on Hover [Squarespace Code Tutorial]
Do you want to show a different image when a user hovers over a picture on your Squarespace website?
Well, with just a simple bit of custom CSS, you can!
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
To add a different image on hover, head to the edit dashboard for the page you want to add your images to and add an image block. Add the image. You then need to duplicate the image block.
Select the back image block and replace it with whatever image you want to appear when the user hovers.
Next, use your Squarespace Block ID Finder plugin to get the block ID for your top image and head to Website > Website Tools > Custom CSS.
Here you want to paste your block ID into the custom CSS block along with the following lines of code:
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
#BLOCK-ID {
transition: 0.2s;
&:hover {
opacity: 0;
}
}
This basically tells Squarespace that when a user hovers over this image, the opacity should be 0 aka making it totally translucent so that you can see the image underneath.
And that’s it, hit save and you’re all done.
This is a great effect to add to a Squarespace website so be sure to bookmark this article so that you can find the custom code in the future.
