Menu Image Hover

Assalamualaikum semua. Ok cuba hover mouse pada gambar di bawah.




  • Dashboard > Layout > Add a Gadget > HTML/Javascript
  • Copy semua code di bawah dan paste kan ke dalm kotak
<style>body {background-color:#bbb;}
#image img {width:230px;height:140px;}
#image img {width:230px;height:140px;border:4px solid #WARNABORDER;}
#links {width:150px;position:absolute;margin-top:-100px;opacity:0;margin-left:-100px;-webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 1.4s ease-out;transition:all 0.3s ease-out;}
#links a {display:block;float:left;background:#WARNAKOTAK;margin-left:1px;padding:3px;width:60px;font-family:verdana;font-size:9px;text-transform:lowercase;height:14px;margin-bottom:1px;text-align:center;-webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 1.4s ease-out;transition:all 0.3s ease-out;text-decoration:none;color:#WARNA TEXT;opacity:0.6;}
#links a:hover {opacity:0.3;}
#image:hover #links {opacity:0.9;margin-left:70px;}</style>
<center><div id="image">
<img src="URL GAMBAR" />
<div id="links">
<a href="LINK">Home</a>
<a href="LINK">Home</a>
<a href="LINK">Home</a>
<a href="LINK">Home</a>
<a href="LINK">Home</a>
<a href="LINK">Home</a>
</div></div></center>


  • Code warna boleh ambil di sini  
  • Yang warna merah tu untuk kedudukan kotak2 menu tu. Makin bnyk makin ke kanan.
  • Jangan lupa utk letak link dan nama menu
  • Lepas tu Save. Moga tuto ini membantu ^^

5 comments

  1. kamu peserta just drop your link kan? dah tak sabar nk tahu result ? huhu

    ReplyDelete
  2. nak mintak izin dulu sebelum guna hehe

    ReplyDelete

Awak mehla komen? satu komen pun jadilah :')