Efek Thumbnail hover preview pada image

Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.

Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIeVTMdxFE8N_srUxZ7yCnBXi8u5tWyQ5nZoF4X-Hl6Gng79V2IN0qfL3zzsuULGSHmmD6HhUJCSoqTxwZtYO0Me6T9rd6lK7vj1NcF4yEh-nLjtY2FmDmd3F8bBP8t0pyWMGoNau-F-a/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIeVTMdxFE8N_srUxZ7yCnBXi8u5tWyQ5nZoF4X-Hl6Gng79V2IN0qfL3zzsuULGSHmmD6HhUJCSoqTxwZtYO0Me6T9rd6lK7vj1NcF4yEh-nLjtY2FmDmd3F8bBP8t0pyWMGoNau-F-a/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW7sYqVFOZjRlv3758Y9jv0C1JtJ6yHJ9hOlikbIQF-uJQO3qhTyCItff1AMQChLJYDZPx4XTxkjAd-sOWiwbwan0vHQR4iNuF0YW3sB1XtAJYI_q0nSXqQNxEWKPjyznvVkix3a5wnbn/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW7sYqVFOZjRlv3758Y9jv0C1JtJ6yHJ9hOlikbIQF-uJQO3qhTyCItff1AMQChLJYDZPx4XTxkjAd-sOWiwbwan0vHQR4iNuF0YW3sB1XtAJYI_q0nSXqQNxEWKPjyznvVkix3a5wnbn/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EEnb9ZGz1b-t7ykl_12lZvLQ0lsIonym3b2rpQHZ3A7Gkwc7PcoYqeOzmNwgKT5hXZL_kxGA8QBmELq3vkRJL72RGA2FNLWzYFYk_qNNS9X1XpYJSkPjHGRsX0OeRAxpMdJamygSkmKo/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EEnb9ZGz1b-t7ykl_12lZvLQ0lsIonym3b2rpQHZ3A7Gkwc7PcoYqeOzmNwgKT5hXZL_kxGA8QBmELq3vkRJL72RGA2FNLWzYFYk_qNNS9X1XpYJSkPjHGRsX0OeRAxpMdJamygSkmKo/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba.