Change Image on Hover in Squarespace
** UPDATED AUGUST 1, 2023 **
Interactivity on your website can be a great way to keep users engaged and on your site for longer. A neat trick I have seen on some websites is to have an image change to a different image when the user hovers overtop. This effect can be a cool way to show a before and after or different angles of a product.
In this video, I show you how to use CSS to change the image when a user hovers overtop. The code for the video can be found below.
Step 1: Upload Your Images
The first step is to make sure the two images you want to use are the same size. This will ensure that your content doesn’t jump or move when they hover overtop the image. Then upload both images into images blocks on your site. Place the image you want to show on hover overtop the other image.
Make sure the settings inside the Image Blocks are exactly the same.
Step #2: Add the Code
Next, copy and paste the code below into the Custom CSS box. You will need to add the block id of the image block you want to show on hover. You can use various chrome extensions or search through the site HTML to find this id. You should now see the image switch when you hover overtop the block.
/* Change Image on Hover */
#BLOCKID {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#BLOCKID:hover {
opacity: 1;
}