Advertise

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="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/s1600/ironman3d.jpg" alt="description" /><img src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/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.

11 komentar:

  1. nah, ini yang gue cari... ghehehe. tengkyu, bos. saya pelajari dulu. :)

    BalasHapus
  2. bro, blognya makin enteng aja neh. kasih rekomendasi dong template yang ringan kayak gini. punyaku berat neh. maklum internetnya cap keong ngesot...

    BalasHapus
  3. tu di taruh di posting html ya brad?...

    BalasHapus
  4. wah jadi takut nich lihat foto2nya,,,,hehehhehe

    BalasHapus
  5. 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

    BalasHapus
  6. nice post sob... keren nih..!!!!

    BalasHapus
  7. dari sini keknya si brader ni datang ke rumahku...hahahaha...selamat sore komandan!!

    BalasHapus
  8. berarti url gambarnya harus dibikin dua ya bro...

    BalasHapus
  9. 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

    BalasHapus
  10. I think other proprietors should take this as an model, very clean and user style and design,the content an expert in this topic!

    BalasHapus