Jump to content

How do I disable Custom CSS function on specific page

Recommended Posts

Site URL: https://www.maverixpe.com/press-kit

I have a reverse greyscale effect applied globally through Custom CSS using the following code I found online:

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

I would like to have this effect disabled on a single page (Press Kit - #collection-604d2efbccf08c42a6c41fef) so that the logos and images on this one page are full colour and no hover effect. 

Link to comment

Replace your CSS rulesets for this effect with the following.

body:not(#collection-604d2efbccf08c42a6c41fef) .image-block {

  filter : grayscale( 100% );
  transition : filter .3s ease-in-out;


body:not( #collection-604d2efbccf08c42a6c41fef ) .image-block:hover {

  filter : grayscale( 0% );


Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.