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/AVvXsEizzUmAw6kPAuRv7gdDqYuWaYV27-aQOorEpltGVxM6MCC10Vbc8uhZ6h-5VIm96TcE7kNBcvZVVsUj3B2uKfVubtpeJrO9J9Uygkky1QCFNO8IRwo2KhD9Y61eKEnVBlgEcqpEuGEOh3P0/s1600/ironman3d.jpg" alt="description" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizzUmAw6kPAuRv7gdDqYuWaYV27-aQOorEpltGVxM6MCC10Vbc8uhZ6h-5VIm96TcE7kNBcvZVVsUj3B2uKfVubtpeJrO9J9Uygkky1QCFNO8IRwo2KhD9Y61eKEnVBlgEcqpEuGEOh3P0/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.

Komentar

Belajar CorelDRAW mengatakan…
Perdana uji coba sob...
ReBorn mengatakan…
nah, ini yang gue cari... ghehehe. tengkyu, bos. saya pelajari dulu. :)
Rawins mengatakan…
bro, blognya makin enteng aja neh. kasih rekomendasi dong template yang ringan kayak gini. punyaku berat neh. maklum internetnya cap keong ngesot...
Adit Mahameru mengatakan…
tu di taruh di posting html ya brad?...
Mimi Taria mengatakan…
wah jadi takut nich lihat foto2nya,,,,hehehhehe
Ferdinand mengatakan…
Malem Brow... aku datang hhe.... Maaf nie telat... wah sayang Blogku jarang ada Gambar2 Sob... beda sama blog Wallpapermu itu hhe... :P tapi mantabz juga tuh hhe.....

Happy blogging Sob.. :P
Kian Coy mengatakan…
nice post sob... keren nih..!!!!
Adit Mahameru mengatakan…
dari sini keknya si brader ni datang ke rumahku...hahahaha...selamat sore komandan!!
romanTIK mengatakan…
berarti url gambarnya harus dibikin dua ya bro...
daren malakian mengatakan…
I think other proprietors should take this as an model, very clean and user style and design,the content an expert in this topic!
jasa seo terbaik di indonesia
I think other proprietors should take this as an model, very clean and user style and design,the content an expert in this topic!

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text