Invert colors of an image in CSS or JavaScript

How do I invert colors of an image (jpg/png..) in either css if possible or javascript?

Previous related questions don't give enough detail.

Answers


CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
<img src="http://i.imgur.com/1H91A5Y.png">

Can be done in major new broswers using the code below

.img {
    -webkit-filter:invert(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

However, if you want it to work across all browsers you need to use Javascript. Something like this gist will do the job.


You can apply the style via javascript. This is the Js code below that applies the filter to the image with the ID theImage.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

And this is the

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>

Now all you need to do is call invert() We do this when the image is clicked.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}
<h4> Click image to invert </h4>

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>

For inversion from 0 to 1 and back you can use this library InvertImages, which provides support for IE 10. I also tested with IE 11 and it should work.


Need Your Help

Using vim for git commit messages broken after updating janus

macos git vim

After updating the janus vim distribution there appears to be a problem with using vim for commit messages. The best example of this is when doing a git pull to get someone else's changes. The vim ...

css :nth-child() :after

html css css3 css-selectors

Is it possible to mix :nth-child() and after?