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
  • Replies 2
  • Views 610
  • Created
  • Last Reply

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


This topic is now archived and is closed to further replies.

  • 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.