Image hover overlay effect

[GTS75]

Hey – is it possible to add custom css to make all clickable images have a “light gray overlay effect” when someone moves their mouse over it? I don’t want any effect to take place on images that aren’t linked.

Here is a site that does it:

https://www.madewell.com/index.jsp

Thanks for the help

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.spb_single_image .img-link img:hover {
  opacity: 0.7;
}

– Kyle

[Nunes]

Hi

don´t work with cardinal?

[Kyle – SUPPORT]

Cardinal will have different css, please provide your link

– Kyle

[Nunes]

This reply has been marked as private.

[Kyle – SUPPORT]

This reply has been marked as private.

[Nunes]

Hi Kyle, The answer appears private i can not get preview 🙁

[Rui Guerreiro – SUPPORT]

Hi,
Try this one.

.age-id-2 .box-content-wrap img:hover {
  opacity: 0.7;
}

-Rui

[Nunes]

Hello Rui,

Dont work, 🙁

[Rui Guerreiro – SUPPORT]

Can you provide admin access?

-Rui

[Nunes]

This reply has been marked as private.

[Kyle – SUPPORT]

Try this:

.box-content-wrap img:hover {
  opacity: 0.7;
}

– Kyle

[Nunes]

WORKS!!!!!! TNKS TEAM!

[Rui Guerreiro – SUPPORT]

Great. Thanks Kyle
Just notice now that my css didn’t worked because was missing a “p” and it should be .page-id-2

-Rui

[Nunes]

Hi Rui, just to understand your code but just like css official homepage is it? And Kyle is for the entire site , right?