Cara Membuat Efek Zoom Pada Gambar Diblog

Masih ingat dengan tutorial Cara Membuat Efek Zoom Pada Gambar Diblogyang 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 menjadi lambat

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 mouseoverBerikut 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Xj4ROIc9xIDjvmwH3kLDma7bc2z35BUBj9heyt_LG32zZRFiGI7ydkivGCIjfrZ5WPJVRheo4ebpcaWI2DDWPo3dB8HblWVnwGVGIozfWVH0NKckO-8YA10ChW2K-dWzCW7BW6V7gmg/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. ni:


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