Applying CSS grayscale property to images

Question

I am using 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>

I am using a grayscale effect on all the images, and I want to make the colors appear when hovering each image, so I am using the following Custom CSS properties with "image-circle" class provided by 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%);
}

The code is working fine on Chrome but its not working on Firefox and IE 10, although I have added -webkit-filter and -moz-filter.

What am I missing?

duplicate http://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox — krzysiej, Dec 04 '14 at 20:51

score 1 · Accepted Answer · answered Dec 04 '14 at 21:23

1

Firefox does not support filter until v35, which will ship in January 2015. IE has its own proprietary filters.

answered Dec 04 '14 at 21:23

szupie

826
10
18

Applying CSS grayscale property to images

1 Answers1