Image Hover (Part 10)

Live preview here

Hai. Dah lama tak update tutorial sejak lepas mid-year exam. Hari ni saya nak ajar image hover. Bila kite hover gambar tu, nanti jadi hitam putih. Tak caye? Klik live preview tu. Kalau korang dah tengok preview tu, baguslah ! Ok let's start :) Btw image hover ni untuk classic template sahaja. Kalau template designer boleh kot. Hehe

• Dashboard > Template
• Ctrl+F, cari kod img { , img{ atau sewaktu dengannya
• Padam kod tersebut dan gantikan dengan kod ni

img{
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
 img:hover{
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}

• Paste sebelum </style>