How to create Hover Image in Squarespace

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.7s;
  transform: translateX(999px);
  }
  &:hover .sqs-image-content {
  background-position: center;
   transition: all 0.5s;
  }
img {
  transition: all 0.7s;
}
}

#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