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.
Contohnya coba arahkan cursor sobat pada gambar dibawah ini
Contohnya coba arahkan cursor sobat pada gambar dibawah ini
Ini kode CSS nya
<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 {
width:500px;height:400px
width:500px;height:400px 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>
Cara membuatnya ;.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 {
width:500px;height:400px
width:500px;height:400px 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>
- Buat Postingan Baru
- Copy kode CSS diatas ganti Url gambarnya dan teks deskripsi gambarnya
Selamat mencoba Semoga bermanfaat
Narasumber : http://www.dynamicdrive.com/ Posted On : 27 Oktober 2011 Time : 21.18
