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>Catatan:
.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/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba.
