Cara membuat efek zoom otomatis pada gambar posting blog

Untuk membuat blog lebih menarik kita perlu menambahkan efek-efek khusus agar berkesan bagi para pembaca blog kita. Sekarang saya mau berbagi tips cara membuat efek zoom otomatis pada gambar postingan blog. Saat pointer mouse berada diatas gambar maka gambar akan membesar. Trik ini tidak susah cukup memasukkan kode CSS tambahan ke skin template anda.

Sekarang buka akun blogger masuk ke template > edit HTML.

Cari .post-body img diantara <b:skin> dengan </b:skin>, tekan Ctrl+F agar mudah dalam mencari.

Kemudian sisipkan kode berikut dibawah tanda kurung penutup "}" .post-body img :

.post-body img:hover {
transform: scale (2,4);
-ms-transform: scale (2,4);
-moz-transform: scale (2,4);
-webkit-transform: scale (2,4)
-o-transform: scale (2,4);
}

Penjelasan :
transform adalah properti dasar/atau dasar untuk membuat transformasi gambar berlaku untuk peramban selain Chrome, Safari, Mozilla, Opera, IE9.

-ms-transform adalah properti yang didukung oleh Internet Explorer 9.

-webkit-transfrom adalah properti yang didukung oleh peramaban Chrome dan Safari.

-moz-transform adalah properti yang didukung oleh peramban Mozilla.

-o-transform adalah properti yang didukung oleh peramban Opera.

scale (2,4) mengubah gambar dengan skala 2 kali lebar dan 4 kali tinggi dari aslinya, secara teori begitu tetapi peramban juga tetap menjaga resolusi gambar agar tetap tidak rusak.

Tidak semua template menggunakan class .post-body img bisa juga menggunakan .post img atau bisa juga yang lain tergantung pembuat template blog anda.

Tweet