Description: Hover an Image Block >> Change to another image
#1. First, install Squarespace ID Finder and find the ID of the Image Block.
In my example, we will have:
- #block-b7cf63143c660c0eeb7e
#2. Use this code to Custom CSS box.
#block-b7cf63143c660c0eeb7e {
.sqs-image-content {
background-image: url(https://cdn.pixabay.com/photo/2023/07/13/06/59/canyon-8124036_1280.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.5s;
background-position: -9999px;
}
&:hover img {
opacity: 0;
transition: all 0.5s;
transform: translateX(999px);
}
&:hover .sqs-image-content {
background-position: center;
transition: all 0.5s;
}
img {
transition: all 0.5s;
}
}
#3. Note
Replace #block-id in the code with your own ID
Replace the example Pixabay with your Image URL.
#4. Result
when hovering on image >> it will change to another image
