Grayscale image with CSS on Safari 5.x

Question

I am trying to show some images on a page where they should be shown in grayscale, except on mouse hover when they smoothly transition into color. I\'ve ma

Answer 1

This one worked great for me:

---

img { float:left;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 1.5s ease;
       -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
            transition: all 1.5s ease;
            z-index: 40 !important;
             display:block;

 }

img:hover { 
  filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);}

---

The images looks really overexposed in Safari however (But they are in greyscale). And the transition isn't supported by Firefox.