Kita pernah belajar tentang membuat efek gambar bergetar dan kali ini kita akan
membahas tentang cara membuat efek zoom pada gambar postingan blog.
Memberikan efek zoom pada gambar
postingan blog selain mempercantik tampilan blog, pengunjung tidak perlu lagi melakukan
klik pada gambar jika ingin melihat gambar dengan jelas karena gambar akan
membesar ketika disentuh kursor.
Cara memberikan efek zoom pada seluruh
gambar dalam posting blog.
1. Login ke akun Blogger Anda
2. Masuk ke bagian Template >> Edit HTML.
3. Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,
2. Masuk ke bagian Template >> Edit HTML.
3. Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,
4. Letakan kode berikut di atas
kode ]]></b:skin>
5. Klik simpan dan lihat hasilnya
Maka semua gambar yang terdapat dalam posting blog telah memiliki efek zoom.
.post img:hover { -o-transition: all
0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:
scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }
5. Klik simpan dan lihat hasilnya
Maka semua gambar yang terdapat dalam posting blog telah memiliki efek zoom.
Selamat Mencoba !!!
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comments:
Post a Comment