Squarespace: Change Image on Hover

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:


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:


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!

6 thoughts on “Squarespace: Change Image on Hover”

  1. Hi! Thanks so much for posting this. I’m having an issue with this code where the hover image is also the background image for the button and link. Is there any way to exclude the button and link from this code so the hover image only appears for the main image block?

    Thank you! The password to my site is hello.


Leave a Comment