How make image to black/white and then colored on hover in Safari?

Question

How make image to black/white and then colored on hover in Safari and also in all browsers?

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

http://jsfiddle.net/KDtAX/487/

This code doesn't work in Safari.

Answer 1

I found a solution that should work on Google Chrome, Safari 6+ & Opera 15+. Just copy and paste the following code into your CSS file to:

1. first, turn all color images to black and white (100% gray) ;

2. then, turn the images back into color when you mouse over.

   img {
       filter: grayscale(100%);
       -webkit-filter: grayscale(100%);
   }
   
   img:hover {
       filter: none;
       -webkit-filter: grayscale(0);
   }
   

In case you want to apply this effect to only ONE image:

1. first, give this image a unique ID in your HTML file. for example:

   <img src="img/stefets-picture.png" id="stefets-picture" alt="stefets's picture">
   

2. then, define the CSS rule for that ID in your CSS file:

   #stefets-picture {
       filter: grayscale(100%);
       -webkit-filter: grayscale(100%);
   }
   
   #stefets-picture:hover {
       filter: none;
       -webkit-filter: grayscale(0);
   }
   

Hope this helps,

stefets