Image Thumbnail

Ada kalanya waktu saya pengen nampilin gambar dipostingan pengen di kecilin tapi juga bisa ngliat gambar sesuai dengan ukuran sebenarnya.

Kalo cara biasanya, dengan memasukkan link di dalam gambar tersebut. Tapi kudu nge-klik gambar itu sendiri. Rada ngrepotin sebenernya.

Tapi, dengan cara baru ini, gambar asli bisa langsung tampil hanya dengan hover-nya. Alias, bisa langsung tampil dengan hanya menggeser cursor ke gambar tersebut.

Tertarik? Silahkan dipelajari.

---

Copy code² dibawah dan paste di CSS u/ multiply ato di HTML u/ Blogspot.

/* Thumbnail */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

Gunakan code dibawah untuk tampilkan gambar di postingan,

<a class="thumbnail" href="#thumb"><img src="img.jpg" width="100px" height="66px" border="0" /><span><img src="img.jpg" /><br />Keterangan di sini</span></a>

Ganti img.jpg dengan link gambar
Edit width dan height sesuai dengan kemauan
Edit Keterangan di sini dengan keterangan gambar

---

Contoh: Gerakkan cursor ke gambar..



Seandinya Keely Hazell 'bermin bola' dengan saia

See...