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!