Having Issue on Inverting Black to White PNG

Question

I have a PNG file and I would like to invert the black color of the objects to White on hover.

I already tried is this

img:hover {
   -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
 }

<img src="http://goproweb.ca/new/img/new/11.png">

This makes the objects grey, but I was hoping to make them to white.

Answer 1

I believe your issue is arising from using an image that is grey, rather than black. When this grey image is inverted, it just looks like a lighter color of grey.

Your code works fine, you just need to use a darker image to get the desired effect. Try swapping your image with this:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">

Working fiddle with different image: https://jsfiddle.net/9f2cd2df/1/