CSS3 introduced one of the very fancy features to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone happy about it.

Here is a list of the browsers that support this feature:

1. Chrome (prefixed)
2. Firefox
3. Safari
4. Opera

and then we have Internet Explorer which still hasn’t put it on shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.

Statements from IE:

• https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx
• https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Afilter-effects-1

Update: Microsoft Edge has shipped this feature as of Build 10586+

I had a requirement to invert white images into the black. This was when the user switches themes on the website. Hence created this small useful plugin that takes the current image and uses SVG filter solution to invert it into the black.

InvertImages

Usage is pretty simple.

Let us say you have an white image:

<img src="images/icon-home.png" alt="Home Page" class="icon-home">

And you wish to change this image into black, all you have to is:

$("img.icon-home").invertImages();

For more options, please read this Wiki:  InvertImages jQuery Plugin Wiki