Image Galery

S

ebagai contoh bisa anda lihat disini:DEMO
Cara pembuatan nya:
Cari kode: ]]></b:skin>
copas kode css dibawah ini dan letakkan di atas nya:

<style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: transparent; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: white; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

Contoh Penerapan nya:

<div class="gallerycontainer">


<a class="thumbnail" href="#thumb"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ1fhjM9Cb2gj6ykRBVPYlKN7LIms73Aqh1q_GncslUdhct6VioNWPQSpmCww" width="100px" height="75px" border="0" /><span><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ1fhjM9Cb2gj6ykRBVPYlKN7LIms73Aqh1q_GncslUdhct6VioNWPQSpmCww" />
Cool Frog</span></a> 


<a class="thumbnail" href="#thumb">Fish<span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQJ9zerhJsasxYWdcPSUKgM2BTGDvtBhuqSoxo-0jG7GQrYlvDNtQ" />
Transparent Fish</span></a>


</div>



Selamat Mencoba