How to make image darker on mouse hover?

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 !

Replies 2 (2)
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

-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.
6 0 1

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