Memperbesar Gambar dengan Efek "Bouncing"
Ini adalah merupakan sebuah pembesar gambar sederhana dengan penambahan animasi 'bouncing', dimana saat cursor digulirkan diatas gambar, maka gambar akan terlihat membesar dan kemudian memantul kembali ke ukuran penuh sesuai dengan ukuran gambar yang sebenarnya.
Masukan URL gambar yang akan anda gunakan kedalam kode HTML, tepatnya menggantikan text atau link yang sudah diberi "garis bawah".
SELESAI...
sumber: cssplay
Demo :
Letakan cursor pada gambar...More Detail :
Kode CSS :
<style type="text/css">
.holder {width:318px; margin:0 auto;}
.zoom {width:96px; height:64px; float:left; margin-left:10px; position:relative;}
.step1 {margin:0; width:96px; height:64px;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.step2 {width:100%; height:100%; margin:0;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.zoom img {width:100%;}
.zoom:hover {z-index:100;}
.zoom:hover .step1 {width:600px; height:400px; margin-left:-252px; margin-top:-168px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.zoom:hover .step2 {width:80%; height:80%; margin:40px 60px;
-webkit-transition:0.15s 0.3s;
-moz-transition:0.15s 0.3s;
-ms-transition:0.15s 0.3s;
-o-transition:0.15s 0.3s;
transition:0.15s 0.3s;
}
</style>
.holder {width:318px; margin:0 auto;}
.zoom {width:96px; height:64px; float:left; margin-left:10px; position:relative;}
.step1 {margin:0; width:96px; height:64px;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.step2 {width:100%; height:100%; margin:0;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.zoom img {width:100%;}
.zoom:hover {z-index:100;}
.zoom:hover .step1 {width:600px; height:400px; margin-left:-252px; margin-top:-168px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.zoom:hover .step2 {width:80%; height:80%; margin:40px 60px;
-webkit-transition:0.15s 0.3s;
-moz-transition:0.15s 0.3s;
-ms-transition:0.15s 0.3s;
-o-transition:0.15s 0.3s;
transition:0.15s 0.3s;
}
</style>
Kode HTML :
<div id="info">
<div style="font-family: "Courier New",Courier,monospace;">
<span style="font-size: x-large;"><b>Demo :</b></span></div>
<br /><br /><br /><br />
<div class="holder">
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsClq0Ka3IELom2DbXv0-oXwBaQsNP10_YRveehraykAzCjIeCIt5I8UwznLeboxhIoH5kh_gS0fbhiMgxIBtXOiGC36R6EaU3s0bkyj4ILOxWIDVxchZOcZ56iyUqeh269TI2F8zCmLZ/s500/Resize-of-100-0119.jpg" alt="" />
</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8qBoM-hFTnBLxDK6Kb7PezbkT_oK7qzNAMDw9mdo361IQb6nvjZS9mmRFM54kkf_vboBHRf74uPOTJIpWGoEbcDajwnR0Z6Ox2AjnpqTdzEmAbV0X6Y3ndyp59OcnoM6N2vhc_oopDtT/s500/Resize-of-100-0120.jpg" alt="" />
</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYnInun7w9k7f4JT2ju3l_iDtyqxZ5HfufDjRx2OUF1_19mvSsJuhVwgj7tkz_OlZBQjxZuZadjZluKqTwIYTs8IZjkhHKQ85IBrLwveAik36SPtCxxzP9Ay3cp8MdIzxL_ONJ0FhTz0/s500/Resize-of-100-0135-1.jpg" alt="" />
</div>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p class="info">Copyright ©2012 Buku Catatan si Ugi</p>
<br />
</div> <!-- end of info -->
<div style="font-family: "Courier New",Courier,monospace;">
<span style="font-size: x-large;"><b>Demo :</b></span></div>
<br /><br /><br /><br />
<div class="holder">
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsClq0Ka3IELom2DbXv0-oXwBaQsNP10_YRveehraykAzCjIeCIt5I8UwznLeboxhIoH5kh_gS0fbhiMgxIBtXOiGC36R6EaU3s0bkyj4ILOxWIDVxchZOcZ56iyUqeh269TI2F8zCmLZ/s500/Resize-of-100-0119.jpg" alt="" />
</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8qBoM-hFTnBLxDK6Kb7PezbkT_oK7qzNAMDw9mdo361IQb6nvjZS9mmRFM54kkf_vboBHRf74uPOTJIpWGoEbcDajwnR0Z6Ox2AjnpqTdzEmAbV0X6Y3ndyp59OcnoM6N2vhc_oopDtT/s500/Resize-of-100-0120.jpg" alt="" />
</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYnInun7w9k7f4JT2ju3l_iDtyqxZ5HfufDjRx2OUF1_19mvSsJuhVwgj7tkz_OlZBQjxZuZadjZluKqTwIYTs8IZjkhHKQ85IBrLwveAik36SPtCxxzP9Ay3cp8MdIzxL_ONJ0FhTz0/s500/Resize-of-100-0135-1.jpg" alt="" />
</div>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p class="info">Copyright ©2012 Buku Catatan si Ugi</p>
<br />
</div> <!-- end of info -->
Keterangan :
Silahkan letakan kode CSS kedalam tag <head> template anda dan kode HTML kedalam tag <body>, atau dimanapun anda ingin menampilkan perbesaran gambar ini pada halaman website anda.Masukan URL gambar yang akan anda gunakan kedalam kode HTML, tepatnya menggantikan text atau link yang sudah diberi "garis bawah".
SELESAI...
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon