Geek Answers Handbook

The problem with inverting black to white PNG

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

I already tried 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 gray, but I was hoping to make them white.

+6
source share
4 answers

I believe your problem arises from using an image that is gray, not black. When this gray image is inverted, it looks like a lighter gray color.

Your code works fine, you just need to use a darker image to get the desired effect. Try replacing the image as follows:

<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 a different image: https://jsfiddle.net/9f2cd2df/1/

+5
source

As James replied, your image is gray.

This can be seen in the bottom fragment (left images).

You can fix this by increasing the contrast (see correct images)

 body { width: 500px; background: linear-gradient(black 220px, white 220px, white 440px, tomato 440px); } .test { width: 200px; height: 200px; position: relative; } .one:hover { -webkit-filter: invert(1); } .two { -webkit-filter: contrast(500%); } .two:hover { -webkit-filter: invert(1) contrast(500%); } 
 <img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div> <img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div> <img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div> <img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div> <img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div> <img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>
+1
source

Your code is working correctly, I think the problem is with the image itself

 img:hover { -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); } 
 <img src="//www.tracto.com.br/wp-content/uploads/2014/05/Icone-circular-Facebook.png" width="250">
0
source

I put my comment as an answer because my assumption was correct. Since your image is a .png image, it may contain transparent pixels. As you can see from your example, your code does not work. When I hover over the image, I guessed that the white elements of your image are actually transparent.

What I did was just copy the image into an MS mask and save it as a .jpg . As a result of this, since the jpg format does not support transparent pixels, there are no more transparent pixels. Thus, this should overcome the inversion problem.

Now, when you run your code, you see that it works flawlessly.

 img:hover { -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); } 
 <img src="http://oi64.tinypic.com/6tibys.jpg">

So, the only thing you need to do: open the image editor and fill these “white” bodies with white color. Exterior parts may remain transparent. This will fix the problem, I think.

0
source

More articles:


All Articles