Header Hover(image)

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

---

Tweet