Pink effect hovering image

[sofiaduarte]

Hi there,

I'm trying to apply a color effect to several images in the same page. The image should turn in pink tones when hovering.

I was able to do this to one image with SVG (and a lot of CSS). The problem is that I need to apply this to many images in the same page, and the code gets very confusing with so much information.
Is there other way to do this, maybe with javascript?

Thanks!
Sofia Duarte

 

[CodeMonkeyJ]

It's hard to tell if your code could be adapted without seeing it, but do you have browser requirements? CSS has fantastic filter functionality[1]. It looks pretty well supported, as well[2].

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/filter
[2] https://caniuse.com/?search=css filter