Cara Membuat Zoom Effect pada Gambar di Blog

Rasanya jika tampilan blog hanya teks itu membosankan. Oleh sebab itu perlu juga ada gambar atau foto di blog supaya mata bisa betah dan tertarik untuk melihat blog kita. Baik gambar yang digunakan sebagai ilustrasi postingan atau gambar yang dijadikan banner dan dipasang di sidebar.

Gambar selain bisa menjadi hiasan bisa juga menjadi pendukung dari tulisan kita. Blog sebagai salah satu media sosial yaitu untuk menuangkan ide pikiran dan pengalaman bisa lebih menarik. Salah satunya dengan membuat efek-efek pada gambar yang ada di blog.

Dulu pernah kita pelajari cara membuat efek mouseover. Sekarang kita akan belajar membuat zoom effect atau efek perbesar. Jadi ini adalah cara membuat efek pada gambar yang disentuh oleh mouse otomatis akan zoom atau diperbesar. Untuk membuat zoom effect ini tidaklah sulit, langsung saja simak langkah-langkahnya.

Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini di bawahnya:

.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;
}

5. Simpan Template jika sudah selesai.
6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada kode HTML gambar, contohnya seperti ini:

<a class="ow" href="http://twitter.com/kurniasepta" ><img border="0" height="177" src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" width="284" /></a>

Enter your email address:

Ikuti @kurniasepta

Baca juga pelajaran ngeblog lainnya