Css ile üzerine gelince renkli olan siyah beyaz resim efekti

Bugünlerde bir proje için bazı resimlerin sayfada siyah beyaz olarak görünmesi ve üzerine gelince renkli olmasının sağlanması ihtiyacı üzerine internette bulduğum türlü javascript eklentisi haricinde (ki bunlarda sorun yaşadım) bunun sadece css kullanarak da yapılabileceğini buldum. Aşağıdaki css tanımlarını css dosyanıza yada bu işlemi yapmak istediğiniz sayfada <style></style> imleri arasına ekleyerek bu etkiyi sağlayabilirsiniz:

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 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Bu kodları ekledikten sonra istediğiniz resimlere grayscale sınıfını vererek siyah beyaz hale getirip üzerine geldiğinde renkli olmasını sağlayabilirsiniz.