Change Images on Hover in Squarespace Fluid Engine

Apr 7

In today's tutorial, we will delve into a straightforward yet impactful method to transform image blocks on hover using Squarespace Fluid Engine. By skillfully incorporating understated animations and interactive features, you can enhance your website's visual appeal and direct your visitors' focus to essential elements. This aesthetically pleasing technique strikes the perfect balance between engagement and user-friendliness. So, without further ado, let's begin:

Step 1: 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.

Step 2: 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.

Step 3: 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