How to show a second image on a hover in Squarespace

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:

1. Upload your two images to the custom files section of your site

2. Add the CSS code and replace the text “first image url” and “second image url” with your URL

3. Add the line of custom code to the page on your site

This video is a little outdated but the code still work! To reach your CSS panel, and the space where you can upload the images, click on Pages → Website Tools → Custom CSS. On a standard page, instead of a blue plus sign, click the add block option and add a code block.

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:

<div id="img-hover"></div>