Header Hover(image)

Amy Munirah | Tuesday, October 25, 2011 | 1Comments |
Assalamualaikum. hari ni tenet lembabbbb### , tapi bila online fesbuk ja lembap,bila hapdet belog tak. fesbuk semenjak ada layout tepi-tepi tu sume jadi lembap tahu ! ##grr . haha xd.


oke,la ni pulak amy nak buat header ada hover. bila cursor sentuh header, ada image lain keluar macam gambar dekat bawah ni


before

after

oke,dah tengok ? jom amy ajar cara buat pulak ek.
1) Dashboard->design->edit hmtl->tick expand widget template(penting)
2) Lepas tu, tekan ctrl+f dan cari code ini
/* Header
3) Lepas tu copy code ini

#header:hover{
-webkit-transition-duration: 1s;background-image:url(URL IMAGE);}
4) And paste bawah code yan korang search tadi tu ye.
5) So,code penuhnya :
/* Header----------------------------------------------- #header:hover{
-webkit-transition-duration: 1s;background-image:url(URL IMAGE);}
6) Oke,paham ? preview dulu,baru save ye.
NOTA KAKI:
  1. 1s ialah untuk masa image korang tu na keluar. pahemm ? :D
  2. url image pulak maksudnya image yang akan keluar bila cursor sentuh header tu.

Thank you for reading