How to Change Images on Hover in Squarespace [Simple Guide]

Apr 7

In today's tutorial, we will look at how to add a CSS code snippet to Squarespace to change your website’s images on hover. The code below works on Squarespace Fluid Engine.

As a Squarespace designer specializing in minimal and stylish web designs, I’m always looking for ways to incorporate subtle, interactive touches. This hover effect is a perfect example of how you can elevate your website's design while maintaining a clean, modern aesthetic. To see this effect in action, check out this design I created for Metatone. The combination of minimal design, carefully selected images, and this hover effect creates a captivating and visually appealing website experience.

How to Change Images on Hover in Squarespace using CSS

Upload Your Hover Image
To upload the image that will appear on hover, access your Squarespace website's back-end, and navigate to Website > Website Tools > Custom CSS > Click on the Custom Files dropdown. Upload your desired image here, and take note of the image URL, as we'll use it in the code later.
Identify the Target Image Block
Locate the Image Block you wish to modify and find its Block ID. Copy the Block ID, as we'll replace #BLOCK-ID in the code with this ID. The easiest way to find a block ID is by downloading this chrome extension.
Insert the Custom CSS Code

Paste the provided code into your Custom CSS Panel, making the following changes:

Replace #Block-ID with the Block ID you copied earlier.
Replace YOUR URL with the URL of the image you uploaded to Custom Files.

 
/* Change Image on Hover */

#Block-ID .content-fill:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('YOUR URL');
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.3s ease;}

// Show the new image overlay on hover //
  
#Block-ID .image-block-outer-wrapper:hover .content-fill:after {
  opacity: 1;
}

It’s as simple as that, happy designing!

VIEW CODE SHOP