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...
04 Januari, 2011 10:29
ReBorn mengatakan…
nah, ini yang gue cari... ghehehe. tengkyu, bos. saya pelajari dulu. :)
04 Januari, 2011 12:03
Rawins mengatakan…
bro, blognya makin enteng aja neh. kasih rekomendasi dong template yang ringan kayak gini. punyaku berat neh. maklum internetnya cap keong ngesot...
04 Januari, 2011 13:30
Adit Mahameru mengatakan…
tu di taruh di posting html ya brad?...
04 Januari, 2011 15:31
Mimi Taria mengatakan…
wah jadi takut nich lihat foto2nya,,,,hehehhehe
04 Januari, 2011 15:53
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
04 Januari, 2011 21:23
Kian Coy mengatakan…
nice post sob... keren nih..!!!!
05 Januari, 2011 14:41
Adit Mahameru mengatakan…
dari sini keknya si brader ni datang ke rumahku...hahahaha...selamat sore komandan!!
31 Maret, 2011 16:59
romanTIK mengatakan…
berarti url gambarnya harus dibikin dua ya bro...
27 April, 2011 22:57
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
11 Desember, 2013 23:12
Template Booklet Company Profile 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!
17 Februari, 2014 09:19
Posting Komentar

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Gambar
Mengenal lebih dalam mengenai Motion Tween dan Shape Tween , Pada program flash terdapat 2 (dua) jenis animasi yaitu Animasi Motion Tween dan Animasi Shape Tween . 1.Motion Tween Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir. sebagai contoh anda ingin menggerakan suatu bola dari kiri ke kanan, dengan adanya motion tween kita bisa menggunakan sedikit objek tanpa harus membuat banyak objek, untuk contoh animasi Tween bisa anda lihat gambar dibawah ini. 2.Shape Tween Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween.
Read more »

Motion Graphic atau Bumper

Gambar
Mungkin banyak diantara kita yang bertanya apa sebenarnya arti dari motion grafic . Dari beberapa artikel yang pernah gw baca semuanya tidak ada yang spesifik menjelaskan arti dari motion grafic. tapi dari semua dapat dirangkum apa arti dari motion grafic tersebut. Pengembangan dari seni graphic design yaitu motion design , konteksnya adalah motion graphic sebagai film, video atau computer animation. Termasuk di dalamnya adalah tipografi dan grafis yang bisa dilihat sebagai titles untuk film, pembuka program televisi, bumper dan elemen-elemen grafis yang muncul di layar kaca. Kemudian web-based animation, channel id berupa logo tiga dimensi yang merupakan identitas sebuah stasiun televisi. Juga bagian-bagian di dalam iklan televisi. Apapun yang muncul sebagai graphic design dalam media elektronik audio visual adalah pekerjaan yang dilakukan oleh motion designer. Secara tidak disadari oleh pemirsa awam, bahwa karya motion design muncul di media elektronik dengan porsi yang cukup besar.
Read more »

Jadikan Blogging Sebagai Sarana Ibadah Di Bulan Suci Ini + Baner Gratis

Alhamdullilah tidak terasa bulan Ramadhan akan datang kembali. Rasanya baru kemaren ngejalanin bulan puasa, begitu nikmatnya hidup ini sampai sampai setahun sudah terlewati dan bertemu lagi dengan bulan penuh Berkah, Rahmat dan Ampunan ini yaitu bulan suci Ramadhan. Kayanya sekarang waktu yang tepat untuk kita saling memberikan maaf kepada orang orang terdekat kita Orangtua, Kaka, Adik, saudara, Teman dan semuanya yang kita kenal tidak terkecuali dengan teman di dunia online ini seperti para Blogger tentunya. Di Postingan ini saya meminta maaf kepada blogger semua yang slalu setia datang,numpang lewat, kesasar, ataupun buang sampah di blog ini, Yang mungkin ada tulisan atau postingan di blog ini yang menyinggung perasaan blogger semua. ataupun komentar saya di blog anda yang kurang berkenan di hati para blogger, Dengan tulus Saya meminta maaf yang sebesar besarnya.....!!! SELAMAT MENJALANKAN IBADAH PUASA 1431 H SMOGA DI BULAN RAMADHAN SEKARANG INI KITA DIBERIKAN KEKUATAN UNTUK MENJALA
Read more »