Cara Membuat Auto Zooming Pada Gambar

Oleh Syafdillah

04 April 2016

Auto Zoom Image yaitu memperbesar gambar secara otomatis ketika gambar tersebut disentuh oleh cursor, dengan menggunakan fungsi zoom pada CSS.

Caranya cukup mudah, ok kalau begitu kita langsung saja pada tutorialnya.

1. Copy kode CSS dibawah ini dan letakkan sesudah kode ]]></b:skin>
   

   .zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
   .zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

   
   Lau simpan.
2. Kemudian penerapannya bisa Anda buat di mana saja, misalkan di postingan yang memerlukan gambar. Agar gambar tersebut dapat terkesan zooming jika disentuh mouse, Anda tinggal memanggilnya dengan kode seperti berikut ini :
   

   <div class="zoom">
   <img src="URL GAMBAR SOBAT" />
   </div>

Bagaimana? Mudah bukan.

Berikut adalah demonya, coba anda dekatkan mouse ke arah gambar Tukul Arwana.

Ayo Like Facebooknya

Tag : Blogging