23 December 2013

Tutorial : Colourful Image Hover

Aina Sofea | 12:11 PM | 1Comments |
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

1 comment:

Tinggalkan komen , jom ?? LIKE SINI dan FOLLOW SITU lah juga yaa ?? ^_^



"Budi Bahasa Budaya Kita"