Tutorial : Colourful Image Hover

Assalamualaikum dan Salam Sejahtera !

Bismillahirrahmanirrahim ....


Cer hala cursor anda kat gambar di bawah

*gambar ini bukan hak milik saya !*

Tutorial ini direquest oleh : Kak Fazira 

Kenapa saya guna gambar tu ? Supaya memudahkan korang untuk melihat warna apa yang ia akan berubah . Ia diambil dari blogger INI [klik] ...

Okay , tanpa membuang masa , tutor bermula :)

Template Designer 

Step 1 : Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Copy & Paste kod di bawah

img {

border:5px solid #fff;

box-shadow:0px 0px 2px #333;

-moz-transition:1500ms;

-webkit-transition:1500ms;

}

img:hover {

-webkit-filter: hue-rotate(360deg);

-moz-filter: hue-rotate(360deg);

-webkit-transition:1500ms;

-moz-transition:1500ms;

}

Step 2 : Tengok hasil -> Apply to blog -> View Blog

Done !

Classic Template

Step 1 : Dashboard -> Template -> CTRL + F kod ni :

-> Copy kod di bawah & Paste di ATAS kod yang dicari tadi .

img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}

Step 2 : Save !

Done ! 

Selamat Mencuba :D

Credit to - Hafiz Zulkafly