Image Block Poster Hover (instances only - NOT all)

Is it possible to assign the same code to a single page or section within a site and not ALL instances? I am wanting to have a few image blocks on the homepage have a hidden hover in one color, but have the same code on a different page with another color and hidden hover. Is that possible? Below is the code I have thus far (which is applied to ALL instances of the poster image block..)

/* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#37C578;
}

You can add this code to Homepage Header (Hover Homepage in Pages > Main Navigation or Not Linked > Click Gear icon > Advanced)

<style>
  /* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#37C578;
}
</style>

On 5/16/2022 at 12:41 PM, mwinn3 said:

/* Image poster hover */
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 50%;
  background-color:#0074c8;
}

 

@tuanphan  First I have to say your responses have been so helpful!

This code above worked perfectly for what I need on a poster image. I changed the opacity/colour to 60%. However, the title also changes opacity. Is there a way to tweak the code to keep text 100% white?

I was able to solve it!

.design-layout-poster .image-card-wrapper {
  visibility: visible;
  opacity: 1;

}
.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:hsla(205, 100%, 39%, 0.60);
  transition-duration: 0.35s;
}