CSS on all pages except one

Site URL: https://www.thirstforallah.com

Hey all, currently I have the following CSS applying a gentle fade on all pictures on my site upon hover. I would like to exclude my splash page, as there is a image block there that I do not want fading. 

img {
   transition: all ease-in-out 500ms !important;
}
.sqs-block-image:hover img, .slide:hover img, img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

Rather than manually enter every single collection id prior to the code (I plan on dramatically expanding the site) - how can I apply to all other pages and exclude the splash. This is the collection ID for the splash page: collection-5e8c158b6e74072ae107edaa

I'm still learning here. Thanks!

On 6/23/2020 at 11:27 PM, bangank36 said:

You can do like this

body:not(#collection-5e8c158b6e74072ae107edaa) img {
   transition: all ease-in-out 500ms !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) .sqs-block-image:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) .slide:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

 

This worked BEAUTIFULLY. Thank you for your help!

Nice, I want to add a custom css on ALL pages exept of one (page-id-1583).
How can I do that?

On 3/9/2021 at 9:52 PM, Werny said:

Nice, I want to add a custom css on ALL pages exept of one (page-id-1583).
How can I do that?

Add this to Design > Custom CSS

body:not(#page-id-1583) * {
	font-family: yourfontname !important;
}

I cannot get this to work, any tips on how to use it to exclude this code from one page on my site? Thank you

The code:

.sqs-block-image img {
    border-radius: 25px;
}

The page:

https://www.greywatercorps.com/projects

#collection-6052a1a2fbb7162bd0766ac9

On 3/19/2021 at 10:39 PM, tuanphan said:

Add this to Design > Custom CSS

body:not(#page-id-1583) * {
	font-family: yourfontname !important;
}

 

@jfmedia

Try the following.

body:not( #collection-6052a1a2fbb7162bd0766ac9 ) .sqs-block-image img {

  border-radius : 25px;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.