Hover for Header (berpusing, bergerak ke kiri/kanan, ke bawah dn sebagainya)

penat nye...baru je lepas raikan aktiviti kat kolej..ok,tanpa buang masa,jom kita tenguk tutorial untuk header..nk buat dia gerak-gerak ke..pusing-pusing ke atau ke bawah...korang boleh lah pilih salah satu hover untuk header korang. *pilih satu je.tutorial nie eyra belajar dari Lettha , Una , dan Zira ade yg Eyra buat sendiri..hahaha...cuma tambah je code yg boleh di letak kepada basic code..dont forget credit untuk mereka kalau guna tutorial nie...

1. Search kod :

         #header { 

*lepas tuh copy laa mane-mane code yg eyra bg dibawah nie :

Header ke Kiri atau ke Kanan :

2. Then, copypaste code di bawah nie selepas tande } pada code yg korang search tadi.. :

#header:hover {

padding-left: 50px;

-webkit-transition-duration: 0.5s;

}

Header ke Kiri atau Kanan,then terus hilang:

3: Cari code yg sama macam code pada step 1...then copy paste code di bawah nie selepas code yg di cari tadi :

#header:hover{

padding-left: 50px;

filter: alpha(opacity=0);

opacity: .0;

-webkit-transition-duration: 2s;

}

* take note for tutorial header bergerak ke tepi atau tepi dan hilang :
BIRU - tukar lah right ke,left ke

MERAH - tukarlah sejauh berapa korang nak

Header Rotate / Berpusing :

4. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi :

#header:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-webkit-transition-duration: 2s;

}

Header Rotate / Berpusing,then hilang :

5. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : *my own made..

#header:hover {

filter: alpha(opacity=0);

opacity: .0;

-webkit-transition: 2s;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

}

*take note untuk rotate header atau rotate then hilang :

MERAH - tukar lah jumlah degree yg korang nk..kalau boleh,jgnlah 360...pening orang lah...

Header Turun ke Bawah :

6. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : 

#header:hover {

padding-top:40px;

-webkit-transition-duration: 2s;

}

Header Turun ke Bawah dan Hilang :

7. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi :  *my own made

#header:hover{

filter: alpha(opacity=0);

opacity: .0;

padding-top:40px;

-webkit-transition-duration: 2s;

}

*take note untuk header turun ke bawah atau turun ke bawah dan hilang:
MERAH - tukarlah berapa banyak ke bawah korang nak letak...

Header Bertukar :

8. Mula-mula korang kenelah buat 2 header yg berlainan...

9. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : 

#header:hover {

background: url(URL HEADER IMAGE)

}

*take note for header berkelip:
BIRU - image yg korang nak ye..

p/s : bagi pengguna template biase..kalau tak jumpa kod yg patut korang cari tuh..korang search laa code bawah nie :

/* Header

*tak faham,boleh tanya ye ^_^