Stosowanie właściwości skali szarości CSS do obrazów - html, css, twitter-bootstrap

Używam programu rozruchowego Twitter 3.3.1

<div class="col-lg-4 listing-box">
<img class="img-circle" src="/images/img/abc.png" style="width: 140px; height: 140px;"></img>
<h2>Creative Designer</h2>
<p>"The Contemplative" - Creative Designer</p>
<p><a class="btn btn-danger" role="button">View details »</a></p>
</div>

Używam efektu skali szarości na wszystkich obrazach,i chcę, aby kolory pojawiły się po najechaniu każdym obrazem, więc używam następujących niestandardowych właściwości CSS z klasą „image-circle” udostępnianą przez bootstrap:

.img-circle {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(50%);
}

.listing-box:hover .img-circle {
filter: none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

Kod działa dobrze w Chrome, ale nie działa w Firefox i IE 10, chociaż dodałem -webkit-filter i -moz-filter.

czego mi brakuje?

Odpowiedzi:

Firefox nie obsługuje filter do v35, który zostanie wysłany w styczniu 2015 r. IE ma własne własne filtry.