Squarespace website design experts. How to make an image change colour on ‘hover’.

There is very little we don’t know about Squarespace. We can help our clients improve and redesign their websites. We also build new bespoke websites for our clients. A lot of our blogs lately have been promoting our new designed templates.

One thing that sets us apart from the mass of people out there offering Squarespace website design services is the cool things we can do with the images on a website. We sometimes get asked to make an image change colour when you hover over it. It’s something you can do yourself if you want to give it a try. It looks complicated but it’s actually fairly straightforward.

To make an image change colour on ‘hover’ in a Squarespace gallery, follow these steps:

1. Prepare the Images:

   • Create two versions of your image: the original (default) and a color-altered version (hover state).

   • Both images should be the same size and format.

2. Upload Images:

   • Upload both images to your Squarespace site, preferably into the same folder or image library.

3. Add Custom CSS:

   • Navigate to Design > Custom CSS in your Squarespace dashboard.

   • Use the following CSS template, adjusting selectors and URLs as needed:

/* Target your gallery image container */
.sqs-gallery-block .sqs-gallery-design-grid .image-slide {
  position: relative;
}

/* Default image */
.sqs-gallery-block .sqs-gallery-design-grid .image-slide img.original {
  display: block;
}

/* Hover image initially hidden */
.sqs-gallery-block .sqs-gallery-design-grid .image-slide img.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On hover, hide the original image and show the hover image */
.sqs-gallery-block .sqs-gallery-design-grid .image-slide:hover img.original {
  display: none;
}

.sqs-gallery-block .sqs-gallery-design-grid .image-slide:hover img.hover-image {
  display: block;
}

1. Modify Gallery HTML:

Squarespace does not let you directly edit gallery image HTML to add two images per slide, so you need to use a workaround:

• Use a Code Block or a Summary Block to manually build a grid.

• Insert each pair of images stacked with classes original and hover-image, for example:

<div class="image-slide">
  <img src="original-image-url.jpg" alt="Default" class="original" />
  <img src="hover-image-url.jpg" alt="Hover Color" class="hover-image" />
</div>

1. Adjust Selector if Needed:

   • Depending on your Squarespace template, gallery markup and class names can differ.

   • Use browser developer tools (Inspect Element) to confirm the correct selectors and adjust the CSS accordingly.

Note: Squarespace's built-in galleries don’t natively support hover image swaps without custom code and manual setup. For full automation, consider using a third-party plugin or custom gallery implementation.

This method provides a smooth visual color change effect on hover by swapping images within the gallery or custom-built grid.