CSS3 Filter – Invert support in Internet Explorer 10+

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

Here is the list of browser that supports 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:

I had an requirement to invert white images into black. This was when 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 black.

Check out:  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

Published by

Shekhar K. Sharma

$hekh@r d-Ziner is a Interface Developer, having expertise in Interface design/development, CSS, ASP.net design & web design trends & etc.