image hover #Grey Colour

hahaha .. lawak kan gambar ni ?  myungsoo .. :) hahaha.. tapi comel misai-misai merah tepi-tepi tu.. lol .. :) lupe pulak.. Assalamualaikum and annyeong haseyo !  hahaha.. saya nak kasi tuto yang cukup mengerunkan !! ten tedeng ... :) tadaa!~~~~ 
saya nak buat first tuto saye.. iaitu .. untuk blogskin saja .. templete designer tak tahu la boleh guna ke tak ..
macam mana nak buat image hover ! :) let's do it !

1. Dashboard > Template 

2. Tekan Ctrl + f serentak dan cari code </style>

3. Copy code dekat bawah ni

/*------ 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;}

4. Paste di atas code </style> tadi
5. Preview & save.
oke .. setelll :) nnti bile pengunjung halakan cursor ke gambar ke,link ke... gambar yang warne pudar,grey tu.. akan bertukar jadi clear... like clean & clear .. haha :) -,- buat lawak yang tak menjadikk pulak .. -,- entahape-ape ..

 anw .. selamat mencube :)