Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS on all pages except one


Ahmed77
Go to solution Solved by bangank36,

Question

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!

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

This worked BEAUTIFULLY. Thank you for your help!

2 answers to this question

Recommended Posts

  • 1
Just now, Ahmed77 said:

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!

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);
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...