internet explorer 10 – how to apply grayscale filter?

by

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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#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

More Related Contents:

  1. Support for “border-radius” in IE
  2. Inline block doesn’t work in internet explorer 7, 6
  3. Box shadow in IE7 and IE8
  4. CSS3 transform: rotate; in IE9
  5. Emulating CSS3 border-radius and box-shadow in IE7/8
  6. Make Adobe fonts work with CSS3 @font-face in IE9
  7. Flex auto margin not working in IE10/11
  8. CSS3 PIE – Giving IE border-radius support not working?
  9. CSS3 transform:scale in IE
  10. text-overflow:ellipsis doesn’t work on IE
  11. Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine
  12. IE11 Document mode defaults to IE7. How to reset?
  13. VBScript support in Internet Explorer 11
  14. @font-face EOT not loading over HTTPS
  15. Detect when a web page is loaded without using sleep
  16. Background-image in keyframe does not display in Firefox or Internet Explorer
  17. How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
  18. Flexbox column-reverse in Firefox, Edge and IE
  19. IE and Edge fix for object-fit: cover;
  20. How does ?#iefix solve web fonts loading in IE6-IE8?
  21. How to make Google Fonts work in IE?
  22. Finding an elements XPath using IE Developer tool
  23. Blank iFrame in IE
  24. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  25. How to disable same origin policy Internet Explorer
  26. Internet Explorer 11 won’t set cookies on a site
  27. Internet Explorer 11 does not add the Origin header on a CORS request?
  28. Will targeting IE8 with conditional comments work?
  29. IE6 Hover Issue
  30. Showing Placeholder text for password field in IE

Leave a Comment