Usual

View Original

Grayscale Image Hover Effect

Paul Reeves

How to Add a Grayscale Image Hover Effect in Squarespace 7.1

Grayscale to Colour on Hover

Colour to Grayscale on Hover

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code:

See this content in the original post

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

2. Color to Grayscale

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code:

See this content in the original post

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:

  1. Open the page with the image in your browser.

  2. Right-click on the image and select Inspect.

  3. Look for the unique identifier block-id-XXXX and note it.

1. Grayscale to Color for a Specific Image

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code adding the specific block id instead of #block-id-XXXX:

See this content in the original post

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

2. Color to Grayscale for a Specific Image

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code adding the specific block id instead of #block-id-XXXX:

See this content in the original post

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:

  1. Open the page you want to target in a browser.

  2. Right-click on the page and select Inspect.

  3. Look in the <body> tag for page-id-XXXX and note the ID.

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code adding the specific block id instead of #block-id-XXXX:

See this content in the original post

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

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code adding the specific block id instead of #block-id-XXXX:

See this content in the original post

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

Need Help?

If you need further assistance with installation or customization, reach out to us at letstalk@usual.ie. We’re here to help!