Cara Membuat Efek Zoom Pada Gambar Artikel - Banyak cara yang telah dilakukan para blogger untuk membuat artikel mereka terlihat lebih menarik. Salah satunya adalah dengan memberikan efek zoom pada gambar postingan blog mereka. Efek zoom yang dimaksud adalah gambar artikel akan membesar secara otomatis saat kursor diarahkan pada gambar tersebut. Salah satu keuntungan menggunakan efek zoom pada gambar adalah Anda tidak perlu memperbesar gambar untuk memperjelas gambar artikel Anda, sebab gambar yang terlalu besar juga dapat memperberat loading gambar artikel blog Anda.
Untuk membuat efek zoom pada gambar sangat mudah dilakukan, Anda hanya perlu memasukan kode pada html template blog Anda tanpa harus melakukan perubahan apapun. Bagi Anda yang menempatkan gambar atau foto pada setiap artikel dan ingin memberikan efek membesar pada gambar tersebut, berikut ini cara untuk membuatnya :
1. Log In ke Blog Anda.
2. Masuk ke menu blog.
3. Klik "Template".
4. Klik "Edit HTML".
5. Klik "Format template".
6. Temukan kode
]]></b:skin>
7. Copy kode dibawah ini, paste diatas kode ]]></b:skin>
.post img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
Untuk efek zoom berputar pada gambar postingan blog Anda, gunakan kode dibawah ini :
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}
8. Klik "Simpan template".
Untuk melihat hasilnya, silahkan buka salah satu postingan blog Anda yang ada gambarnya, arahkan kursor pada gambar tersebut.
Itulah Cara Membuat Efek Zoom Pada Gambar Artikel blog Anda. Efek zoom ini hanya dapat digunakan untuk gambar yang berada pada halaman postingan blog Anda. Semoga bermanfaat.
