Membuat Zoom Effect pada Gambar di Blog

Published by Kurnia Septa Jumat, 16 November 2012

Masih ingat dengan tutorila cara membuat zoom effect yang juga ditulis di blog ini? Kali ini kita akan belajar membuat zoom effect yang lebih mudah. Zoom effect adalah membuat efek perbesar pada gambar yang tersentuh oleh cursor.

Jika dulu harus mengedit template untuk membuat zoom effect, yang ini tidak usah mengubah template. Karena kode CSS-nya digabung langsung dengan HTML kode gambar. Tentu ini selain mempermudah juga bisa membuat blog tidak banyak kode CSS atau membuat blog tidak berat, sehingga loading blog tidak lemot.

Zoom effect yang membuat gambar jadi lebih besar ini bisa dipasang di post atau sidebar blog. Saat punya banner gambar di sidebar bisa memberikan efek zoom ini. Bisa jadi pilihan membuat tampilan gambar banner atau foto jadi lebih menarik, selain memakai mouseover. Berikut adalah kode untuk membuat effect zoom;

<style type="text/css">
.ow 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;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" /></a>

Ganti kode yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu bisa menambahkan kode diatas di post dengan memilih HTML saat menulisnya. Atau juga bisa ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan seperti ini:




Bagaimana? Mudahkan? gambar, banner atau foto akan terlihat jadi lebih menarik. Akan membuat pengunjung tertarik untuk melihat dan mengklik.