Tutorial : image becomes grey when hover

Salam..how are you today?.. ok?...jangan banyak cakap, jom kita mulakan tutorial ini. Tutorial macam mana nak bagi image dalam blog kita tu nampak warna grey. So, kita step2 nya


first: open your template;
second:  search code </style>;
third: paste this code in ABOVE/ATAS </style>;

/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}

cuba buat k..kalau dah jadi tu ok la tu... Kalau yang use design template tu korang boleh letak  di mana2 je. Just letak bawah a:hover..

credit to zara nerd