Make Image Black and White using CSS Filter

Last time i create tumblr theme using css filter for grayscale withhold for firefox and now i will share to you how tomake image to black and white or grayscale. First open your notepad or dreamweaver or text editor for html. And create easy html example .

<h2>CSS Filter :</h2>
<div class="normal">
<img src="yourimage.jpg" alt="">
</div>
<div class="grayscale">
<img src="yourimage.jpg" alt="">
</div>

and for the css

.grayscale{
 filter: grayscale(100%); 
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 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 3.5+ */
}
.grayscale:hover{
 filter: grayscale(0%); 
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}

This css we make grayscale effect (black and white), however if your mouse on fly to the describe will back to coloring.