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 👇

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.

Duplicate image Squarespace

Select the back image block and replace it with whatever image you want to appear when the user hovers.

Upload image to Squarespace

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:

#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.

Show second image on hover Squarespace

And that’s it, hit save and you’re all done.


📩 Join the inner circle to get exclusive code updates


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.


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

https://bycrawford.com
Previous
Previous

[NEW FEATURE] Add Paywall to a Squarespace Blog

Next
Next

Search Entire Squarespace Dashboard [Keyboard Trick]