28 April 2011

Efek Thumbnail hover preview pada image

Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.

Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :
thumbnailshover

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan 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="http://3.bp.blogspot.com/-jJu8-85flkA/TbZCUDwG91I/AAAAAAAABvQ/RzhRUD4-etw/s1600/norman-k.jpg" alt="norman-k" /><img src="http://3.bp.blogspot.com/-jJu8-85flkA/TbZCUDwG91I/AAAAAAAABvQ/RzhRUD4-etw/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="http://3.bp.blogspot.com/-s3_dUdVMyLE/TbZCWK1jHhI/AAAAAAAABvU/YMCSFW9Hzks/s1600/din-udin.jpg" alt="udin-s" /><img src="http://3.bp.blogspot.com/-s3_dUdVMyLE/TbZCWK1jHhI/AAAAAAAABvU/YMCSFW9Hzks/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" http://2.bp.blogspot.com/-z6Bp_vpSrZI/TbZCXpSLr_I/AAAAAAAABvY/5l3YZ-d3uxk/s1600/justin-be.jpg " alt="justin-b" /><img src=" http://2.bp.blogspot.com/-z6Bp_vpSrZI/TbZCXpSLr_I/AAAAAAAABvY/5l3YZ-d3uxk/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba.

5 komentar:

  1. Bagus gan artikelnya. Thanks for share n salam kenal

    BalasHapus
  2. @Marketing Blog, Terima kasih udah kasih apresiasi, salam kenal juga

    BalasHapus
  3. kalau bisa sekalian dikasih penjelasan dari koding nya mas,, jadi gx sekedar tau aja,, sekalian bagi ilmu ,, demi mencerdaskan kehidupan bangsa..
    :)

    BalasHapus
  4. @Blue_Bird, masukan yang bagus
    thanks

    BalasHapus
  5. makasi gan infonya..salam kenal

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.