How to make image darker on mouse hover?

raza
New Member
10 0 0

Hi , can any one help me turn turn the image at the bottom (compare pricing), into a buton. I want it to darken on mouse hover.

Thanks !

https://whatisthatproducts.com/products/bidet-ez-kit-hand-held

Replies 2 (2)
Brendin
Shopify Partner
200 0 29

Hi Raza,

I would first recommend adding a class or id to that image so you can more effectively interact with it. Then at the bottom of your CSS file add

.THE-CLASS-YOU-JUST-MADE:hover {
-webkit-filter: brightness(0.3);
filter: brightness(0.3);
}

Due note, that this may not be compatible with older versions of IE. You might be smarter in the long run, to create a button without using an image. This way you have more controll over it in the CSS

Hope that helps!

Hire Me! - I am available to customize your Shopify store.
TGC
Tourist
6 0 1

Is it possible to add a class / id to non-theme images? i.e. uploaded images?