internet explorer 10 - how to apply grayscale filter

Question

This CSS code works pretty nice for Internet Explorer until 9   img gray       filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 0 0 1 0    gt  lt  filter gt  lt  svg gt  grayscale        filter  gray      -webkit-filter  grayscale 1       But what do I need to do for Internet Explorer 10

User · Answer

Inline SVG can be used in IE 10 and 11 and Edge 12.

I've created a project called gray which includes a polyfill for these browsers. The polyfill switches out <img> tags with inline SVG: https://github.com/karlhorky/gray

To implement, the short version is to download the jQuery plugin at the GitHub link above and add after jQuery at the end of your body:

<script src="/js/jquery.gray.min.js"></script>

Then every image with the class grayscale will appear as gray.

<img src="/img/color.jpg" class="grayscale">

You can see a demo too if you like.

User · Answer

IE10 does not support DX filters as IE9 and earlier have done  nor does it support a prefixed version of the greyscale filter   However  you can use an SVG overlay in IE10 to accomplish the greyscaling   Example   img grayscale hover       filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0    gt  lt  filter gt  lt  svg gt  grayscale       svg       background url http   4 bp blogspot com -IzPWLqY4gJ0 T01CPzNb1KI AAAAAAAACgA  8uyj68QhFE s400 a2cf7051-5952-4b39-aca3-4481976cb242 jpg        from  http   www karlhorky com 2012 06 cross-browser-image-grayscale-with-css html   Simplified JSFiddle  http   jsfiddle net KatieK qhU7d 2   More about the IE10 SVG filter effects  http   blogs msdn com b ie archive 2011 10 14 svg-filter-effects-in-ie10 aspx

User · Answer

Use this jQuery plugin https   gianlucaguarini github io jQuery BlackAndWhite   That seems to be the only one cross-browser solution  Plus it has a nice fade in and fade out effect        bwWrapper   BlackAndWhite       hoverEffect   true     default true        set the path to BnWWorker js for a superfast implementation     webworkerPath   false         to invert the hover effect     invertHoverEffect  false         this option works only on the modern browsers   on IE lower than 9 it remains always 1      intensity 1      speed      this property could also be just speed  value for both fadeIn and fadeOut         fadeIn  200     200ms for fadeIn animations         fadeOut  800    800ms for fadeOut animations            onImageReady function img               this callback gets executed anytime an image is converted

[internet-explorer] internet explorer 10 - how to apply grayscale filter?

Examples related to internet-explorer

Examples related to css

Examples related to internet-explorer-10