Cara Memberikan Efek Auto Zoom Gambar Postingan Blog

Salah satu cara untuk melengkapi atau mendukung penjelasan postingan blog adalah dengan melampirkan gambar hasil dokumentasi. Ada banyak cara dalam mempercantik tampilan gambar pendukung postingan blog agar terlihat lebih menarik dimata pengunjung, diantaranya efek getar dan efek auto zoom ketika gambar terbuka atau disorot kursor mouse. Untuk efek getar mantul sudah Admin bahas pada postingan sebelumnya, dan pada postingan kali ini admin akan membahas cara memberikan efek Auto Zoom pada gambar yang ada dalam konten postingan blog gambar gambar terlihat serti hidup sehingga tidak membosankan.

Cara penerapannya sangatlah mudah, hanya dengan menambahkan source code HTML pada area code HTML Themplate melalui menu Edit HTML. 

Langsung saja cari kode ]]></b:skin> untuk memudahkan pencarian gunakan fitur pencarian dengan cara menekan kombinasi tombol CTRL + F. 




Download Source Code Auto Zoom dan Letakkan kode berikut ini tepat di atas kode ]]></b:skin> seperti gambar di bawah ini: 

 
.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Ketika gambar Run Diskpart tersorot mouse maka akan secara otomatis Auto Zoom




Jika skala zoom gambar dirasa kurang besar atau terlalu besar, kalian bisa melakukan setting skala pada source kode pada bagian scale, misal 1.7 bisa kalian rubah menjadi 1.2 (memperkecil) atau 2.0 untuk memperbesar skala zoom. 

Demikianlah Tutorial cara membuat dan memberikan efek auto zoom pada tampilan gambar postingan blog, semgoa bermanfaat dan terima kasih telah berkunjung, admin tunggu kunjungannya kembali di lain waktu.