Membuat efek zoom pada gambar postingan di web

Efek zoom merupakan sebuah trik yang di gunakan oleh pemilik sebuah web untuk menampilkan sebuah tampilan berbeda, penggunaan efek zoom ini juga sekaligus untuk memperkecil  kapasitas penyimpanan dan mempercepat proses loading web anda.

Efek zoom akan tampak ketika anda atau pun pengunjung mengarahkan mouse pada gambar yang akan dilihat dengan tampilan lebih besar seperti contoh gambar dibawah ini

Untuk melihat efek zoom anda cukup mengarahkan mouse anda ke gambar di atas, maka gambar akan tampak membesar dengan sendirinya.

Cara membuat efek zoom tersebut cukup anda mengikuti langkah berikut ini :

1. Login ke blogger
2. Pilih Rancangan => Edit HTML/java script
3. Cari kode ]]></b:skin>
4. Copy paste scrip berikut ini dan letakkan tepat diatas kode ]]></b:skin>

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

5. Selesai, klik simpan template anda

Lihat hasilnya mengagumkan web anda sudah dapat menampilkan gambar membesar dengan sendirinya ketika mouse di arahkan ke gambar.

catata kecil :
Angka 0.5 maupun 2 diatas berfungsi untuk tampilan zoom, semakin besar angka yang anda masukkan semakin besar pula zoom yang akan di hasilkan
anda dapat merubah sesuai dengan kebutuhan anda sendiri.
semoga tips ini bermanfaat bagi anda
jangan lupa beri komentar anda.

Artikel Terkait: