Grayscale Image Hover Effect Plugin

Images

8 Nov

How to Add a Grayscale Image Hover Effect in Squarespace 7.1

Want to give your images a sleek grayscale-to-color hover effect on your Squarespace site? This simple plugin adds a professional touch to your visuals, perfect for grabbing attention as users interact with your content.This plugin allows you to add a grayscale hover effect to images on your Squarespace site. Choose between starting in grayscale and transitioning to color, or starting in color and transitioning to grayscale. You can apply the effect to all images site-wide, to specific images using block IDs, or to images on specific pages.

Difficulty Level:

Total Beginner: 5/10 (Basic CSS knowledge is helpful, but you can follow along easily!)
Intermediate: 3/10 (Simple CSS copy-pasting)
Expert: 1/10 (Quick and simple)

Option 1: Apply the Effect Site-Wide (All Images)

1. Grayscale to Color

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:


/* Grayscale to Color on Hover for All Images */
.sqs-block-image img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.sqs-block-image:hover img {
    filter: grayscale(0%);
}

Save your changes to apply the effect to all images on your site.

2. Color to Grayscale

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:


/* Color to Grayscale on Hover for All Images */
.sqs-block-image img {
    filter: grayscale(0%);
    transition: filter 0.5s ease;
}
.sqs-block-image:hover img {
    filter: grayscale(100%);
}

Save your changes to apply the effect to all images on your site.

Option 2: Apply the Effect to Specific Images Using Block IDs

To apply these effects to only certain images, you’ll need each image’s unique block ID.

Finding the Block ID:

Open the page with the image in your browser.
Right-click on the image and select Inspect.
Look for the unique identifier block-id-XXXX and note it.

1. Grayscale to Color for a Specific Image

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code adding the specific block id instead of #block-id-XXXX:


/* Grayscale to Color on Hover for Specific Image */
#block-id-XXXX img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
#block-id-XXXX:hover img {
    filter: grayscale(0%);
}

Save your changes to apply the effect to specific images on your site.

2. Color to Grayscale for a Specific Image

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code adding the specific block id instead of #block-id-XXXX:


/* Color to Grayscale on Hover for Specific Image */
#block-id-XXXX img {
    filter: grayscale(0%);
    transition: filter 0.5s ease;
}
#block-id-XXXX:hover img {
    filter: grayscale(100%);
}

Save your changes to apply the effect to specific images on your site.

Option 3: Apply the Effect to All Images on a Specific Page

This option lets you target all images on a particular page by using the page’s unique ID.

Finding the Page ID:

Open the page you want to target in a browser.
Right-click on the page and select Inspect.
Look in the <body> tag for page-id-XXXX and note the ID.

1. Grayscale to Color for All Images on a Specific Page

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code adding the specific block id instead of #block-id-XXXX:


/* Grayscale to Color on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
    filter: grayscale(0%);
}

Save your changes to apply the effect to specific pages on your site.

2. Color to Grayscale for All Images on a Specific Page

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code adding the specific block id instead of #block-id-XXXX:


/* Color to Grayscale on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
    filter: grayscale(0%);
    transition: filter 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
    filter: grayscale(100%);
}