How to add a black & white hover effect to images in Squarespace 7.1 — PIN TO SAVE FOR LATER!

What is a hover effect? A hover effect is an website animation that appears when users hover their mouse over a specific element. Hover effects are a great way to create an engaging experience.

A greyscale image hover effect is a great way to incorporate movement into your website in a trendy and modern fashion.

This copy/paste tutorial will add a gradual black and white filter hover effect to the images on your website.

This hover feature can be found in our Arlie Squarespace 7.1 template.

Apply greyscale hover to images site wide:

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

// GRAYSCALE IMAGES ON HOVER

.image-block:hover { filter: grayscale(100%);
transition: .5s ease-in-out; }

Apply greyscale hover to images in one section:

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

//IMAGE GREYSCALE ON HOVER (SPECIFIC SECTIONS)

section[data-section-id="62c83e7dea3f39061c36580e"] {
.image-block:hover { filter: grayscale(100%);
transition: .5s ease-in-out;
  }}

Update the section ID:

Data section ID’s target the specific ID’s attached to a section of a page on your website.

Here is an example of a data section ID: section[data-section-id="62c83e7dea3f39061c36580e"]

To identify section ID’s, there’s a super handy Google Chrome extension that will magically show you the data section ID for every section on your website with the click of a button.

Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the block codes and ID’s for all of the sections of your site.

Now, go to the top of the section you would like to hide on mobile and look for the blue sticker that reads section{data-section-id………..}.

Click on the blue sticker and the data section ID will automatically be copied to your clipboard.

Replace section ID

Now that you know how to identify data section ID, let’s replace it in the code provided above:

Enable Squarespace ID finder extension and click on the blue section ID sticker that correlates with the Instagram feed section
Replace section ID in the code snippet above: section[data-section-id="62c83e7dea3f39061c36580e"]
Save and refresh your site — you should now have a greyscale hover effect in one section only!