Pure CSS Fish Eye Menu

kali ni saya akan membahas pure CSS Fish Eye,fish eye atau yang kita kenal dengan mata ikan.
mata ikan disini bukan berarti kita membuat menu dengan mata ikan ya...hehehe
tapi kita akan membuat suatu menu yang apabila kursor kita dekatkan maka menu tersebut akan membesar.
Cara membuatnya:
1. Seperti biasa Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/*----------------
Pure CSS Fish Eye Menu Expand Down
-------------------------------*/
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:150px;
width:500px;
margin-bottom:30px;
}
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px;
height:50px;
border:none;
}
.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
.expand-down ul li:hover a img {
width:100px;
height:100px;
}
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}

4. jangan lupa disave
5. Pemanggilannya pada html silahkan disimpan di tempat yang diinginkan pada edit html posting ataupun Gadget Html/java script:

<div class="expand-down">
<ul class="expand-down">
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq98czxv0x2Duh_71mB23fqMn4jasFdtgr-S4c79YRJLDoUewvwQQ2JQoH47N2AqvEeoyDzWjLJqns8Brd_bmXaEmbsfGi_t-LYdjIKxmcT5UFekPG9gdB9b2oQ-nGQ97HFG7uiwmdKk/s1600/safari-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#"target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6awS-vbuGSvDi19sOc5xlTpYZ9UWWsWAAIDfVWP4IevivU1wZ_bJGsyf8uSr2-FBcJ1fBemIapO1pdROq3eFdKvnMYYsK1joLwrgzw5HzMjFrSXcWNJA8iR2U7l4DE3p3TQGevtRyxjs/s1600/google-chrome-trans.png" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIevKHDfZsqaVQFP0jkojeRKg_w_aLj73_kmxAJlX-tHGk9oB67seu7aqnpT-rplDcqu6uB1ENytBG2gezIG4Fj8MKlIt9zh67r1dGoYrXMQPSVxJtP1d8tYeCPoE9CECcuczfWNBu6YM/s1600/ie-trans.png"/>
</a>
</li>
<li>
<a href="#" title="Konqueror" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbLPlLhvKjd311RQmGrT02kNx92rlwkloUKnF8tij9f3evTPtM86WOlFhXWSSe2n2gjKURUxpSmx6Fez2NuPZ5XBVQDR6NZilZ5Ui45QiDmefCSR1T-J6pT14ApdatU1H8m6SGorOAVw/s1600/konqueror-trans.png" />
</a>
</li>
</ul>
</div>

Selesai...
Selamat mencoba