Membuat Zoom Effect pada Gambar di Blog



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/chipaz_anrhy" 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.
Previous
Next Post »

1 komentar:

Click here for komentar
February 10, 2016 at 1:41 PM ×


mantap INFO nya sangat membantu ane
di tunggu update info terbaru nya gan
terima kasih

Selamat judi bola online dapat PERTAMAX...! Silahkan antri di pom terdekat heheheh...
Balas
avatar
admin

Terima telah berkunjung dan meniggalkan komentar di blog sederhana ini..!

NB :
1. Jangan berkomentar SPAM
2. Jangan meninggalakan LINK aktif karna otomatis akan terhapus.
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment
Widget by