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 👇

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

📩 Join the inner circle to get exclusive code updates

Once you’re happy with how your hover transition looks, hit save and you’re all done!

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?