membuat efek zoom pada gambar membuat efek zoom pada gambar

  
 Selamat siang sobat semua , kali ini untuk melengkapi posting saya akan share bagai mana cara membuat membuat efek zoom pada gambar di blog kita bila kena mouse maka efek akan terlihat. Oke langsung aja di salin kodenya


Pilih rancangan --> Edit HTML --> Centang Expand.
Kemudian letakkan CSS berikut diatas kode ]]></b:skin>

.zoom img{

-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/

-moz-transform:scale(0.3); /*Mozilla scale version*/

-o-transform:scale(0.3); /*Opera scale version*/

-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla duration version*/

-o-transition-duration: 0.5s; /*Opera duration version*/

opacity: 0.7; /*initial opacity of images*/

margin: 0 10px 5px 0; /*margin between images*/

}



.zoom img:hover{

-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/

-moz-transform:scale(1.4); /*Mozilla scale version*/

-o-transform:scale(1.1); /*Opera scale version*/

box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/

-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/

-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/

opacity: 1;

}

Kemudian Save Template.

Untuk memanggilnya anda bisa memberikan perintah berikut :

<div class="zoom">
<img src="ULR GAMBAR ANDA"/>
</div>

Oke segitu aja ya diciba dulu.

Judul: membuat efek zoom pada gambar
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh : Unknown