Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot

Tips blog kali ini masih soal utak-atik image di blogspot. Kalau sebelumnya saya post cara membuat gallery foto di blogspot, sekarang adalah cara membuat efek thumbnail hover preview image di blogspot. Sebutan nya agak ribet ya, intinya image yang menggunakan efek hover ini akan membesar ketika mouse kita sentuhkan ke image tersebut. Untuk lebih jelas nya lihat live previewnya disini : LIVE DEMO HOVER PREVIEW IMAGE

Bagaimana sob, tertarik ingin buat image seperti itu ? . Caranya sangat mudah sobat tingal masukan kode berikut ini kedalam add gadget 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/AVvXsEhkpumLnHdiH_gJedX3GCGbZ3YgRt8mBicAOqMkIdXXvYNppFSJ8s_rdN3rKPYPtdEcCBU0-sGthYr-SJ2uTih6yI4vthx4fM6akYENkwgUOA4qu3a3ue_3QwnqyX0yr3Z8ySHwEt91ODSn/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkpumLnHdiH_gJedX3GCGbZ3YgRt8mBicAOqMkIdXXvYNppFSJ8s_rdN3rKPYPtdEcCBU0-sGthYr-SJ2uTih6yI4vthx4fM6akYENkwgUOA4qu3a3ue_3QwnqyX0yr3Z8ySHwEt91ODSn/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVi9ygHYDGlfcWkziAGMEGl1ymA8wBb0v3szqrxDTii3X-2Qlnq4hpHz_bDqkSsv7KHwfAzio8Gw1wB4EHMzJ4-fQ06_NJhOttovVDofTJ-MOJQfWddgrXUatkvY3Y-xTuCJE84fmKQoKY/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVi9ygHYDGlfcWkziAGMEGl1ymA8wBb0v3szqrxDTii3X-2Qlnq4hpHz_bDqkSsv7KHwfAzio8Gw1wB4EHMzJ4-fQ06_NJhOttovVDofTJ-MOJQfWddgrXUatkvY3Y-xTuCJE84fmKQoKY/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UXbPE1IPgMSdUOIR9o2UOl32v1Xv_6E7HHlcxCgD5qOJ4UDU3jjbPXwuxoAe0HONzgv6N1tgKAKueeu9N0pgmNAegOb2CbZWgnbVPxfldOIbkPHBTQe4IiEkEXLr8gJeMHSLtjmr-eOl/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UXbPE1IPgMSdUOIR9o2UOl32v1Xv_6E7HHlcxCgD5qOJ4UDU3jjbPXwuxoAe0HONzgv6N1tgKAKueeu9N0pgmNAegOb2CbZWgnbVPxfldOIbkPHBTQe4IiEkEXLr8gJeMHSLtjmr-eOl/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Note :
Yang diberi stabilo warna merah adalah link gambar. Sobat bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri ya sesuai kebutuhan.

Cukup sekian tips blog kali ini Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot.


Selamat mencoba.

Tweet