Hovering gray does not work in IE11

Question

I use Gray for several elements on the site. However, I cannot get it to work in IE11. For example, in the script below, I use JS to add grayscale and grayscale-fade classes so that the image is color-to-grayscale hovering. How can I make this work in IE11? The author says that the plugin should be initialized for IE11 (i.e. $('article.project img').gray(); ), but if I add this line, all images will turn gray by default from the very beginning. I just want this to work in IE11. Can someone show me how?

Fiddle: http://jsfiddle.net/61jcam54/

HTML

 <div id="content"> <article class="project"> <img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title"> <div class="overlay" style="margin-left: -1px; width: 367px;"> <h3>Project Title</h3> <a class="post-link expand" href="http://google.com">+</a> </div> </article> </div> 

CSS

 article.project { float: left; margin: 0 1% 2%; max-width: 375px; overflow: hidden; position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } article.project img { display: block; margin: 0; padding: 0; max-width: 100%; height: auto; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } article.project .overlay { background: rgba(0, 0, 0, 0.8); bottom: 0; display: block; left: 0; opacity: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 1; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .hover .overlay, .active .overlay, .hover-sticky .overlay { opacity: 1; } article.project .overlay h3 { color: #FFF; font-size: 17px; font-size: 1.7rem; font-family: 'Montserrat',sans-serif; text-transform: uppercase; line-height: 1.3; margin-top: 3.3em; padding: 0 1em; position: absolute; text-align: center; top: 50%; width: 100%; } article.project .overlay .expand { border: 5px solid #FFF; bottom: 0; color: #FFF; display: block; font-size: 30px; height: 60px; left: 0; line-height: 50px; margin: auto; position: absolute; right: 0; text-align: center; top: 0; width: 60px; z-index: 2; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } /* GRAYSCALE */ .grayscale, .grayscale-sticky { /* Firefox 10+, Firefox on Android */ filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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'/></filter></svg>#grayscale"); /* IE 6-9 */ filter: gray; /* Chrome 19+, Safari 6+, Safari 6+ iOS, Opera 15+ */ -webkit-filter: grayscale(100%); } .grayscale.grayscale-fade { -webkit-transition: -webkit-filter .2s; } .grayscale.grayscale-off, article:hover .grayscale.grayscale-fade { -webkit-filter: grayscale(0%); filter: none; } .grayscale.grayscale-replaced { filter: none; -webkit-filter: none; } .grayscale.grayscale-replaced > svg { opacity: 1; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .grayscale.grayscale-replaced.grayscale-off > svg, article:hover .grayscale.grayscale-replaced.grayscale-fade > svg { opacity: 0; } 

Js

 $('#content').on('mouseenter', 'article.project', function(){ $(this).addClass('hover grayscale grayscale-fade'); $(this).find('.post-link').hide(); }).on('mouseleave', 'article.project', function(){ $(this).removeClass('hover grayscale grayscale-fade'); $(this).find('.post-link').show(); }); 

Answer 1

TL DR

Below is an example that works in IE11 and all other supported browsers.

---

Exaplaination

There were a few problems ...

According to the plugin that you use when the browser does not support CSS3 filters (for example, in IE10 / 11), the following applies

... the plugin uses the functions of Modernizr._prefixes , css-filters , Inline SVG and svg-filters , which are detected by Modernizr to determine browser support. If the browser supports built-in SVG and SVG filters, but not CSS filters, the plugin replaces the elements with SVG filters.

Since the img element must be replaced by the SVG element in IE11, a script plugin (with Modernizr shiv) is required for it to work. In the above example, the jsFiddle script jquery.gray.min.js was not even actually executed in IE11, because it was blocked due to inappropriate mime types (this warning was in the console).

To get around this, I just copy / paste the script into the example. In addition, it is worth noting that Modernizr Docs report that the script must execute before loading <body> , This seems relevant in IE when using HTML5 Shiv:

We recommend placing Modernizr in your head twice: HTML5 Shiv (which allows HTML5 elements in IE) should run before <body> , and if you use any of the CSS classes that Modernizr adds, you want to prevent FOUC.

Now that the script is running in IE11, the plugin should be initialized, and the img element should be replaced by SVG. According to the plugin, img elements will be automatically replaced if the element has a .grayscale class. Also, it looks like you can also use your own .gray() method. Since your example did not actually pass the .grayscale class to the img element, it would not initialize in IE11.

Below you will notice that I added the .grayscale class to the img element (to initialize it in IE11). In addition, the .grayscale-off class is also added to the element so that the gray effect is turned off initially. In the updated jQuery, you will see that this class is simply switched.

Here is the corresponding updated HTML / CSS / jQuery:

Updated example here

I also shortened jQuery a bit:

 $('#content').on('mouseenter mouseleave', 'article.project', function (e){ $('.grayscale', this).toggleClass('hover grayscale-off'); $(this).find('.post-link').toggle(); }); 

 .grayscale.grayscale-replaced > svg { opacity: 0; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .grayscale.grayscale-replaced.grayscale-off > svg { opacity: 1; } 

 <div id="content"> <article class="project"> <img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" /> <div class="overlay"> <h3>Project Title</h3> <a class="post-link expand" href="...">+</a> </div> </article> </div> 

Answer 2

IE prefers SVG to add filters to images. Here's how to do it on IE10, Firefox, and Chrome: http://jsfiddle.net/azx3mxmt/3/

Images are added programmatically as follows:

 var container = document.getElementById("container"); var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"; for (var i=200 ; i < 2200 ; i += 100) { container.appendChild(animation(src, i)); } 

SVG filters are installed as follows:

 <svg width="128" height="128" viewBox="0 0 128 128"> <defs> <filter id="filter" > <feColorMatrix id="gray" type="saturate" values="0.5"/> <filter/> </defs> <image x="0" y="0" width="128" height="128" filter="url(#filter)" xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/> </svg> 

Other effects can be achieved using SVG. Take a look at this website .