Tips Mudah Cara Membuat Efek Membesar atau Zoom Pada Gambar

Cara Membuat Efek Membesar atau Zoom Pada Gambar - Membuat efek gambar membesar ketika disentuh oleh cursor atau kursor sangat membuat gambar lebih menarik dan bisa juga menarik perhatian mata pengunjung blog, selain gambar yang bisa membesar ketika disentuh cursor atau kursor ada juga cara agar link membesar ketika disentuh cursor silahkan baca artikelnya disini 

Cara Membuat Link Membesar Saat disentuh Cursor. Ketika keduanya Anda gunakan pada blog Anda setidaknya akan membuat tampilan blog menjadi lebih cantik dan menarik, serta bisa menarik perhatian pengunjung blog.

Membuat efek membesar pada gambar blog sangat mudah sekali seperti pada tutorial membuat link membesar saat disentuh cursor, cara membuat efek zoom pada gambar blog ini hanya menambahkan sebuah kode CSS yang berfungsi sebagai efek zoom atau membesar ketika cursor diletakan diatas gambar tersebut. Gambar yang membesar adalah gambar yang berada pada homepage dan halaman posting, karena kode ini khusus untuk gambar artikel atau postingan saja.

Nah pada kesempatan kali ini blog Ficri Pebriyana akan menjelaskan sebuah tips atau trik agar gambar pada postingan atau artikel blog bisa membesar otomatis dengan menggunakan efek zoom. Sobat Blogger semua bisa mencoba dan menerapkan tutorial membuat gambar membesar saat disentuh cursor pada blog masing-masing. Oke langsung saja lihat tutorial cara membuat efek membesar atau zoom pada gambar saat disentuh cursor dibawah ini :

Demo

1. Masuk ke Blogger.com

2. Klik Template => Edit HTML

3. Cari kode ]]></b:skin>

4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

.post 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 2px 2px 0;

}

.post img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

5. Klik Simpan Template

Catatan :

- Kode CSS diatas sudah valid CSS3.

- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.

Cara Membuat Efek Gambar Berputar Zoom di Blog

Sekian artikel mengenai Cara Membuat Efek Membesar atau Zoom Pada Gambar. Kurang lebihnya mohon maaf.

Semoga Bermanfaat...