Применение CSS полутонового свойства к изображениям

Question

Я использую Twitter Bootstrap 3.3.1

<div class="col-lg-4 listing-box"> 
     <img class="img-circle" src="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> 

Я использую в оттенках серого эффект на все изображениях, и я хочу, чтобы сделать цвет появляется при наведении курсора на каждое изображение, так что я Я использую следующие свойства пользовательских CSS с «образом-кругом» классом предоставляемого бутстрапом:

.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%); 
} 

код работает отлично на Chrome, но его не работает на Firefox и IE 10, хотя я добавил -webkit-фильтр и -moz-фильтр.

Что мне не хватает?

Answer 1

Firefox не поддерживает filter до v35, который будет отправлен в январе 2015 года. У IE есть собственные собственные фильтры.