Membuat Thumbnail Gallery CSS3

Setelah Googling sana sini eh ternyata saya dapatkan script css3 buatan Mas Andes Risky Nugroho tentang cara menerapkannya Sumbernya disini saya lihat Membuat Thumbnail Gallery CSS3

Adapun caranya adalah sebagai berikut :

Copy kan saja script ini di postingan blogs sobat dengan mengganti gambar yang ada di dalamnya
Login ke Blogger Anda
Copykan Kode ini kedalam Postingan blogs sobat :

<style> #thumbgallery { overflow: visible; } #thumbgallery ul li { list-style:none; display:inline-table; padding:5px; } #thumbgallery ul li .pic{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052; -webkit-box-shadow:#272229 2px 2px 10px; -moz-box-shadow:#272229 2px 2px 10px; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); box-shadow:#272229 2px 2px 10px;} #thumbgallery ul li .mini:hover { cursor:pointer; } #thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; } </style>

<div id="thumbgallery">
<ul> <li>
<img alt="" class="mini" src="http://4.bp.blogspot.com/-c7OrTNmHvP0/U6TzLvMUM8I/AAAAAAAAFVI/3bLENyG3h8k/s1600/vanessa08_a5b5244.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://4.bp.blogspot.com/-c7OrTNmHvP0/U6TzLvMUM8I/AAAAAAAAFVI/3bLENyG3h8k/s1600/vanessa08_a5b5244.jpg" />

</li> <li>
<img alt="" class="mini" src="http://1.bp.blogspot.com/-x03PqouwEEs/U6TzMWO1BTI/AAAAAAAAFVQ/jE6VoMuxnXM/s1600/vanessa13_a61ddc3.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://1.bp.blogspot.com/-x03PqouwEEs/U6TzMWO1BTI/AAAAAAAAFVQ/jE6VoMuxnXM/s1600/vanessa13_a61ddc3.jpg" />

</li> <li>
<img alt="" class="mini" src="http://3.bp.blogspot.com/-6boOwfgMDmM/U6TzHgALryI/AAAAAAAAFUw/fwo5ooNivvU/s1600/vanessa-sc1_9ccd449.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://3.bp.blogspot.com/-6boOwfgMDmM/U6TzHgALryI/AAAAAAAAFUw/fwo5ooNivvU/s1600/vanessa-sc1_9ccd449.jpg" />

</li> <li>
<img alt="" class="mini" src="http://3.bp.blogspot.com/-ri3pvq0luzQ/U6TzIS0Z7wI/AAAAAAAAFU0/us1L7MQX5Wc/s1600/vanessa-sc2_9d2fd27.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://3.bp.blogspot.com/-ri3pvq0luzQ/U6TzIS0Z7wI/AAAAAAAAFU0/us1L7MQX5Wc/s1600/vanessa-sc2_9d2fd27.jpg" />

</li> <li>
<img alt="" class="mini" src="http://1.bp.blogspot.com/-Zhgrvi9Uvls/U6TzGpf3cGI/AAAAAAAAFUo/S9tRcIad4zE/s1600/vanessa-sc3_9cdc2d9.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://1.bp.blogspot.com/-Zhgrvi9Uvls/U6TzGpf3cGI/AAAAAAAAFUo/S9tRcIad4zE/s1600/vanessa-sc3_9cdc2d9.jpg" />

</li> <li>
<img alt="" class="mini" src="http://4.bp.blogspot.com/-2tb3x8i-73Y/U6TzJtALPII/AAAAAAAAFVA/0J83GaEMuww/s1600/vanessa-sc5_9cbcaf9.jpg" height="100" width="100" /> <img alt="" class="pic" src="http://4.bp.blogspot.com/-2tb3x8i-73Y/U6TzJtALPII/AAAAAAAAFVA/0J83GaEMuww/s1600/vanessa-sc5_9cbcaf9.jpg" />

</li> </ul>
</div>

Note:
Ganti URL gambar diatas dengan gambar sobat

Sumber dan DEMO nya ada disini :

http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html