Ini kode pembesar gambar serbaguna berbasis CSS dapat menampilkan thumbnail gambar dan mengubah ukuran dimensinya Menjadi lebih besar ketika onmouseover. Kode CSS ini bekerja secara manual dan menentukan dimensi dari setiap gambar yang diperbesar, Lebih menghemat banyak waktu tanpa harus loading untuk melihat gambar dalam ukuran yang lebih besar hanya cukup mengarahkan cursor saja.
<style type="text/css">
.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}
</style>
<div class="ienlarger">
<a href="http://cuerosbhelatos.blogspot.com/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" />
Gersang Banget</span></a></div>
<div class="ienlarger">
<a href="http://cuerosbhelatos.blogspot.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" />
Gersang Banget</span></a></div>