Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot
Friday, November 23, 2012
Edit
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/AVvXsEgVHZ55bMuOHvr5NV0wI1jKFCDg5QUFcfkBU6xb8TCwpAx8PaGgAPIsdPlCOkpDC08aot80F9CaQg8nPr7Cri95dZIp5fNcwDTwygtr8XhoMUvS6KIiUdHRUzRpkVAjbYWqsh4Soadpxj3p/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHZ55bMuOHvr5NV0wI1jKFCDg5QUFcfkBU6xb8TCwpAx8PaGgAPIsdPlCOkpDC08aot80F9CaQg8nPr7Cri95dZIp5fNcwDTwygtr8XhoMUvS6KIiUdHRUzRpkVAjbYWqsh4Soadpxj3p/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasFciwET2DHHdDpuwAISo59oDVjLxASh4H5g8Brc3EWf6tOYLcNyYR0K6SFqoRFFJT4k8L-6Ij1ZJ7AMa-e0Ce0lDWGPynLkuoEikiUMrG00DlOvym0lLpnSWSCgiC831zzFCaIfgSgNn/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasFciwET2DHHdDpuwAISo59oDVjLxASh4H5g8Brc3EWf6tOYLcNyYR0K6SFqoRFFJT4k8L-6Ij1ZJ7AMa-e0Ce0lDWGPynLkuoEikiUMrG00DlOvym0lLpnSWSCgiC831zzFCaIfgSgNn/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEPeWqx5llaEB18Bj0Jmulmhz0f4H9l-9Ejyojr6gSRmCj7-MYwWHiYON4MM4MEZiGJp325NxVko7pstBpOg_6jcmwszkqG9nP4sZFPnjT_7ue5FtLzpc9GHpmL46ltpfqp9Bqa_nwIGE/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEPeWqx5llaEB18Bj0Jmulmhz0f4H9l-9Ejyojr6gSRmCj7-MYwWHiYON4MM4MEZiGJp325NxVko7pstBpOg_6jcmwszkqG9nP4sZFPnjT_7ue5FtLzpc9GHpmL46ltpfqp9Bqa_nwIGE/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
.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/AVvXsEgVHZ55bMuOHvr5NV0wI1jKFCDg5QUFcfkBU6xb8TCwpAx8PaGgAPIsdPlCOkpDC08aot80F9CaQg8nPr7Cri95dZIp5fNcwDTwygtr8XhoMUvS6KIiUdHRUzRpkVAjbYWqsh4Soadpxj3p/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHZ55bMuOHvr5NV0wI1jKFCDg5QUFcfkBU6xb8TCwpAx8PaGgAPIsdPlCOkpDC08aot80F9CaQg8nPr7Cri95dZIp5fNcwDTwygtr8XhoMUvS6KIiUdHRUzRpkVAjbYWqsh4Soadpxj3p/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasFciwET2DHHdDpuwAISo59oDVjLxASh4H5g8Brc3EWf6tOYLcNyYR0K6SFqoRFFJT4k8L-6Ij1ZJ7AMa-e0Ce0lDWGPynLkuoEikiUMrG00DlOvym0lLpnSWSCgiC831zzFCaIfgSgNn/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasFciwET2DHHdDpuwAISo59oDVjLxASh4H5g8Brc3EWf6tOYLcNyYR0K6SFqoRFFJT4k8L-6Ij1ZJ7AMa-e0Ce0lDWGPynLkuoEikiUMrG00DlOvym0lLpnSWSCgiC831zzFCaIfgSgNn/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEPeWqx5llaEB18Bj0Jmulmhz0f4H9l-9Ejyojr6gSRmCj7-MYwWHiYON4MM4MEZiGJp325NxVko7pstBpOg_6jcmwszkqG9nP4sZFPnjT_7ue5FtLzpc9GHpmL46ltpfqp9Bqa_nwIGE/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEPeWqx5llaEB18Bj0Jmulmhz0f4H9l-9Ejyojr6gSRmCj7-MYwWHiYON4MM4MEZiGJp325NxVko7pstBpOg_6jcmwszkqG9nP4sZFPnjT_7ue5FtLzpc9GHpmL46ltpfqp9Bqa_nwIGE/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
Related:
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.