How to Create a Hover Effect on Images

After designing your website, and want to spice up your images and don’t know how?

In this blog, I’m going to tell you how to create a hover effect on your image on Squarespace without any plugins.

Watch Video:

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide, I may receive a small kickback in commission. There is no additional charge to you, and it supports my channel, so I can continue bringing more content to you all.

What is the Hover Effect on the Image?

The hover effect is when you hover over your mouse, it’s going to shift a different image. 

And if you want that effect on your Squarespace images, here is the process:

Step 1: Download Squarespace Finder

You have to download the Squarespace ID Finder to be able to find the block ID. Once you have it downloaded as your extension, you should activate it so that the block ID will appear. Select the block ID that you want and copy it.

Step 2: Pasting block ID 

> Go to Design

> Click Custom CSS

> Copy and paste the main code

Hover Effect Code:

// Hover Effect

#ADDBLOCK:hover {

content: URL("IMAGE URL");

}

> Replace the #ADDBLOCK with your copied block ID

Step 3: Pasting your image URL

Still at the Custom CSS,

> Click Manage Custom Files

> Add your image

Remember to set your images at the same size so that the proportions would look good. There would be a possibility that having different image sizes could make the hover distorted. 

> Delete IMAGE URL

> Click between the “”.

> Click Manage Custom Files

> Click your image

And the URL of your image will automatically paste.

Step 4: Save

And there you have it.

Make sure it is working, and that’s how you do the hover effect on images on Squarespace.