In this post, I will share how to change image on hover on Squarespace Websites.

Change Product Images on Hover

If you want to change product images on hover, use this plugin. It supports

• Summary Block (with products)
• Product Page
• Product Block

Change Images on Hover (Image Blocks)

Follow the instructions below

1. Add an Image Block

You need to add an Image Block

and upload your image

2. Find Image Block ID

Next you need to determine the ID of the block above. You can use this extension to do.

In this example, we will have an ID:

div#block-yui_3_17_2_1_1577707091631_3805

3. Upload Hover Image

Next you need to upload hover image to your website.

You can follow this guide to upload image.

Assuming the hover image is named img1.jpg, then after uploading it will have the address:

https://cylinder-mackerel-pnk5.squarespace.com/s/img1.jpg

with cylinder-mackerel-pnk5.squarespace.com is your domain.

4. Add CSS code

Add this code to Home > Design > Custom CSS

/* hide image on hover */
  div#block-yui_3_17_2_1_1577707091631_3805 a:hover img {
    opacity: 0;

}
  div#block-yui_3_17_2_1_1577707091631_3805 a img {
    transition: all ease-in-out 0.9s;
    opacity: 1;
  }
/* Set new image */
div#block-yui_3_17_2_1_1577707091631_3805 a {
    background-image: url(https://cylinder-mackerel-pnk5.squarespace.com/s/img1.jpg);
    background-size: cover;
    display: block;
}

Replace ID in above code with your image block ID.

Save. Done!