Cara Membuat Efek Zoom Pada Gambar di Blog

TutorialBlog46 - Cara Membuat Efek Zoom Pada Gambar di Blog - masih membahas mengenai treatment gambar gambar di blog agar tampil lebih menarik pengunjung. Jika sebelumnya telah kita bahas mengenai cara membuat efek redup terang pada gambar maka pada hari ini akan kita bahas cara membuat efek zoom pada gambar di blog.

Jika masih ada yang belum tahu mungkin sedikit penjelasan berikut bisa membantu - ketika mouse digeser ke arah gambar maka gambar tersebut akan berubah menjadi lebih besar dari ukuran sebelumnya - [gimana masih bingung? jika bingung silahkan arahkan mouse ke gambar group Girl Band SNSD berikut dibawah ini, pasti jadi tambah bingung :) hehehe bercanda!]

Gimana? sudah paham kan yang dimaksud dengan membuat efek zoom pada gambar! jika iya maka silahkan dicoba atau dipraktekkan untuk membuat tampilan gambar lebih menarik, tentu saja dengan mengikuti dan menyimak langkah-langkah berikut dibawah ini:

Cara Membuat Efek Zoom Pada Gambar di Blog

1. Log in kedalam akun blog
2. Pilih menu [Template]
3. Letakkan kode CSS [efek zoom] berikut ini diatas kode ]]></b:skin> 

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

.mp img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

4. Untuk membuat efek zoom pada gambar silahkan terapkan kode CSS diatas pada tag <img> seperti contoh berikut:

<a class="mp" href="http://tutorialblog46.blogspot.com"><img class="aligncenter" style="border: 0px none;" title="Girl band SNSD Korea" alt="Girl band SNSD Korea" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitl7Epmo9ZnSEgAjbV_qdc4pPzn5GkLWpztJMJdd98UoqExT2Hc_oWZbQ04n_UqHjIm4NXov17Kd9D_DHHWpL0Gm9sTyJWLehpB3HaHqJ4wZy8RtScqfNzs20J_gS0vrgyOWuGo2h-4x8/s1600/asmirandah.jpg" width="275" height="274" border="0" /></a>

5. Untuk langkah ke-4 ini Anda bisa terapkan gambar pada saat menulis artikel di blog dan pilih mode HTML. Seperti yang Saya lakukan sekarang ini yaitu menerapkannya kedalam gambar yang ada di tulisan blog bro :)
6. Simpan >> Selesai

Cara tersebut diatas memudahkan kita untuk membuat efek zoom pada gambar secara global yang artinya kita hanya menambahkan nama class [dalam hal ini kita mempunyai class dengan nama "mp"] kedalam gambar [tag <a></a> dan kemudian diikuti tag <img> bro] untuk membuat efek zoom.

Dan terakhir jangan lupa untuk memberikan komentar mengenai tulisan ini [bisa berupa saran atau kritikan ya bro!] agar tulisan selanjutnya bisa menjadi lebih baik dan bermanfaat. Sekian tulisan mengenai cara membuat efek zoom pada gambar yang dapat disampaikan melalui media blog ini. Semoga bermanfaat bagi pribadi dan pengunjung pada umumnya, Selamat mencoba dan salam sukses [Selesai/]