In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I apply it to multiple images?
//.bc contain all the images
.bc {
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(.9); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(90%);
transition : filter 500ms linear;
-webkit-transition: -webkit-filter 500ms linear;
-moz-transition: -moz-filter 500ms linear;
}
Is there a way to implement this grayscale effect on multiple images? Additionally, how can I address the issue of the transition effect not functioning in Firefox yet?