Remove CSS From Specific Image Blocks But not Others

Hello,

I am currently using the below code to change images when hovering over image blocks with the curser (decrease in opacity and white on hover).

.image-block {
transition: all .5s ease-in-out;}

.image-block:hover {
background-color: #FFFFFF; opacity: 0.5; transition: all .5s ease-in-out;}

I initially added this because all of the image blocks were clickable links but I have now added a few additional blocks that are only images and are not links. On these images, I do not want the image to change on hover but I want it to on images that are also links. 

How do I remove the custom CSS from specific image blocks/how to I apply custom CSS to specific image blocks?

The images in question are on the same webpage. 

Thanks!

You change your CSS to this

.image-block:not(#image-block-id1):not(#image-block-id2) {
transition: all .5s ease-in-out;}

.image-block:not(#image-block-id1):not(#image-block-id2):hover {
background-color: #FFFFFF; opacity: 0.5; transition: all .5s ease-in-out;}

Find image block id with this code https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 2/20/2022 at 10:54 PM, tuanphan said:

You change your CSS to this

.image-block:not(#image-block-id1):not(#image-block-id2) {
transition: all .5s ease-in-out;}

.image-block:not(#image-block-id1):not(#image-block-id2):hover {
background-color: #FFFFFF; opacity: 0.5; transition: all .5s ease-in-out;}

Find image block id with this code https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you for your help but it didnt work. This is what I have now:

.image-block:not(#image-block-ab5030adc8a73b1365ca) {
transition: all .5s ease-in-out;}

.image-block:not(#image-block-ab5030adc8a73b1365ca):hover {
background-color: #FFFFFF; opacity: 0.5; transition: all .5s ease-in-out;}

Nothing has changed. The image I dont want affected is still fading on hover. 

On 3/3/2022 at 5:43 AM, Dirk-H said:

Thank you for your help but it didnt work. This is what I have now:

 

.image-block:not(#image-block-ab5030adc8a73b1365ca) {
transition: all .5s ease-in-out;}

.image-block:not(#image-block-ab5030adc8a73b1365ca):hover {
background-color: #FFFFFF; opacity: 0.5; transition: all .5s ease-in-out;}

 

Nothing has changed. The image I dont want affected is still fading on hover. 

Can you share link to page where you use image? We can check code easier