0 Hover Box Image Thumbnail Dengan CSS

Untuk postingan kali ini saya akan membuat galery imege dengan hover thumbnail hanya menggunakan CSS, Hover box image thumbnail ini sangat cocok buat blogger yang blognya mengkoleksi banyak gambar atau image.

Lihat Demo

Untuk kodenya bisa lihat di bawah ini :

CSS Code

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

HTML Code

<ul class="hoverbox">

<li><a href="LinkAnda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGVvbP9KJwq3XL563iwu_dYRPTDN1w1KkggCRXuY-LYH1wX7HjOyXryAZ1Tmwo-P-SlVPiJ8YZglsExDctK759_Ww1bTqU4pqsFr4BleSljRi3F8O4ntCUXyS1pZTD3LH0FJPLOi_igr5/s1600/ironman3d.jpg" alt="description" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGVvbP9KJwq3XL563iwu_dYRPTDN1w1KkggCRXuY-LYH1wX7HjOyXryAZ1Tmwo-P-SlVPiJ8YZglsExDctK759_Ww1bTqU4pqsFr4BleSljRi3F8O4ntCUXyS1pZTD3LH0FJPLOi_igr5/s1600/ironman3d.jpg" alt="description" class="preview" /></a></li>
.............................
.............................
.............................
</ul>

NB : Warna merah untuk url gambar kecil (Small), warna Biru Untuk URL gambar hover Besar. Sedangkan warna hijau merupakan link yang ingin anda pasang.

Silahkan code css-y di custom sesuai selera blogger selamat mencoba.

Tweet

Komentar →