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

On 3/2/2022 at 10:43 PM, 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. 

Did anyone find a solution to this? 

I am trying to achieve something similar using the :not function however for a summary block.

Thanks

This is my current code:

 

//Hover Summary Blocks of Project Thumnails - Summary Block Appearance//
@media screen and (min-width:800px){
  .summary-item:not(#block-yui_3_17_2_1_1678287406551_217495) {
    //only use position relative with carousel summary block
    position: relative;

    img {
      //transition: all .5s ease!important;
    }

    .summary-content {
      position: absolute;
      color: #fff!important;
      top: 50%;
      left: 50%;
      width: 80%;
      opacity: 0!important;
      pointer-events: none;
      transition: all .5s ease!important;
      transform: translate(-50%, -50%)!important;
      -webkit-transform: translate(-50%, -50%)!important;
      -ms-transform: translate(-50%, -50%)!important;
      -moz-transform: translate(-50%, -50%)!important;
    }
    .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt   {
      color: #fff!important;
    }
  }
  .summary-item:hover {
    img {
      -webkit-filter: brightness(25%);
      filter: brightness(25%);
    }

    .summary-content {
      opacity: 1!important;
    }
  }
}
 

On 3/14/2023 at 6:02 PM, JonnyIlsley said:

Did anyone find a solution to this? 

I am trying to achieve something similar using the :not function however for a summary block.

Thanks

This is my current code:

 

//Hover Summary Blocks of Project Thumnails - Summary Block Appearance//
@media screen and (min-width:800px){
  .summary-item:not(#block-yui_3_17_2_1_1678287406551_217495) {
    //only use position relative with carousel summary block
    position: relative;

    img {
      //transition: all .5s ease!important;
    }

    .summary-content {
      position: absolute;
      color: #fff!important;
      top: 50%;
      left: 50%;
      width: 80%;
      opacity: 0!important;
      pointer-events: none;
      transition: all .5s ease!important;
      transform: translate(-50%, -50%)!important;
      -webkit-transform: translate(-50%, -50%)!important;
      -ms-transform: translate(-50%, -50%)!important;
      -moz-transform: translate(-50%, -50%)!important;
    }
    .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt   {
      color: #fff!important;
    }
  }
  .summary-item:hover {
    img {
      -webkit-filter: brightness(25%);
      filter: brightness(25%);
    }

    .summary-content {
      opacity: 1!important;
    }
  }
}
 

 

Change this class name

.summary-item:not(#block-yui_3_17_2_1_1678287406551_217495)

to this

.summary-v2-block:not(#block-yui_3_17_2_1_1678287406551_217495)