How to make grayscale and transition effect working in firefox and ie?

Question

To make work grayscale work in IE 10 and IE 11 I could do what I found in this question: internet explorer 10 - howto apply grayscale filter?, but that is for single image. I need to do it for all images. How could I do that?

//.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;
}

So, how can I make it work on multiple images? And how can I make the transition effect work (it is still not working in Firefox)?

please note for mozilla browser the transition effect only not working. — Bhojendra Rauniyar, Mar 03 '14 at 05:31

score 0 · Answer 1 · answered Mar 03 '14 at 04:34

0

You should use -moz-filter:

.bc {
    filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -webkit-filter: grayscale(90%);
}

answered Mar 03 '14 at 04:34

Samuel Liew

76,741
107
159
260

Nope. For mozilla it works with svg but the problem with moz is transition effect only. – Bhojendra Rauniyar Mar 03 '14 at 05:32
`moz-filter` doesn't do anything interesting. How did this get +1? – Tomáš Zato Jan 11 '15 at 14:38

score 0 · Answer 2 · answered Mar 03 '14 at 05:23

you can use Prefixfree from Lea Verou look it up here

.bc {
        filter: grayscale(90%);
    }

or use the standard

  .bc {
        -webkit-filter: grayscale(90%);
        -moz-filter: grayscale(90%);
        -ms-filter: grayscale(90%);
        filter: grayscale(90%);
    }

How to make grayscale and transition effect working in firefox and ie?

2 Answers2