How to show a second image on a hover in Squarespace

Apr 1

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This came into my inbox as a tutorial request - if there is something you want to learn how to do, feel free to submit your ideas at insidethesquare.co/suggest-tutorial

In this tutorial, I am going to show you how to use some clever code to show a second image on a hover in Squarespace.

I did this demo in my 7.1 site but it does work for both 7 & 7.1

This tutorial has three steps:

Upload your two images to the custom files section of your site
Add the CSS code and replace the text “first image url” and “second image url” with your URL
Add the line of custom code to the page on your site

Download Transcript

Here is the code for the custom CSS section:

#img-hover {
background-image: url('first-image-url');
height: 20vw;
width: 20vw;
background-size:contain; }
#img-hover:hover {
background-image: url('second-image-url');
}

And here is the code to put on your site where you want to see this image effect show up on your site: