Saturday, October 26, 2013

Cara Membuat Efek Zoom Hover Pada Gambar

Cara Membuat Efek Zoom Hover Pada Gambar
Cara Membuat Efek Zoom Hover Pada Gambar | Setelah sebelumnya Revan Blog share tutorial blog Cara Membuat Widget Hanya Tampil Hanya Pada Halaman Depan Blog Saja, pada kesempatan kali ini Revan Blog akan share kembali sebuah tutorial blog yang sangat menarik dan cukup banyak yang berminat untuk menggunakannya. Hal ini terlihat dari banyaknya menanyakannya melalui beberapa forum yang ada, yaitu Cara Membuat Efek Zoom Hover Pada Gambar.

Sengaja pada postingan kali ini Saya beri judul Cara Membuat Efek Zoom Hover Pada Gambar karena efek ini hanya akan aktif ketika objek/gambar tersebut disentuh dengan kursor. Untuk melihat previewnya, silahkan Sobat arahkan mouse Sobat pada gambar di atas. Kira-kira seperti itulah efek zoom hover tersebut.

Berikut cara membuat efek zoom hover pada gambar tersebut.
  • simpan kode CSS di bawah ini tepat di atas 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}
Untuk penerapannya Sobat bisa terapkan pada halaman postingan atau dimana saja yang Sobat inginkan. Berikut contoh penerapannya.
  • Gunakan kode HTML di bawah ini untuk memanggil kode CSS zoom hover tersebut.
    <div class="zoom"><img src="URL GAMBAR"/></div>
Demikianlah tutorial singkat mengenai cara membuat efek zoom hover pada gambar tersebut. Jika ada yang kurang jelas, silahkan menanyakannya melalui form komentar yang telah disediakan. Selamat mencoba Sobat. ^_^

Artikel Terkait

- Dilarang SPAM

- Dilarang Pasang Link Aktif

- Harus Sopan.
EmoticonEmoticon