Cara Membuat Efek Zoom Gambar saat Dilalui Cursor. Pernahkah sobat melihat gambar membesar sendiri ketika disentuh cursor ? Apa ? Gak Pernah ? Sama Donk !! hehehe ... Kali ini Zona Artikel akan membagikan informasi tentang Membuat Efek Zoom Gambar saat Dilalui Cursor.
Demo
Bagaimanakah cara membuatnya, langsung saja ke TKP !!
1. Login ke Blogger
2. Pilih Rancangan > Edit HTML > Centang Expand Template Widget.
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
(Gunakan CTRL+F untuk memudahkan pencarian)
.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}
4. Kemudian Save Template.
Apakah dah selesai ? Belum. Masih ada kode lagi nih yang ketinggalan.
Masukan kode berikut dengan cara Rancangan > Tambah Gadget > Pilih HTML/Java Script
<div class="cayunhover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXx6qZKCIOF7qxifTYXE6w8JvtIqB4voqW9-WbbDlbh4NIyR98zPfTuSqeorNwdRAoKlfb4AeDdZnaHe7-GWhFwTZtrbOrrpsxg96vaFhNNeHrnOJN5Y_rmGrN52n7jvijfYR1sxP9cQ/s1600/blogger-logo%5B2%5D.png"/></div>
Ket.
* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXx6qZKCIOF7qxifTYXE6w8JvtIqB4voqW9-WbbDlbh4NIyR98zPfTuSqeorNwdRAoKlfb4AeDdZnaHe7-GWhFwTZtrbOrrpsxg96vaFhNNeHrnOJN5Y_rmGrN52n7jvijfYR1sxP9cQ/s1600/blogger-logo%5B2%5D.png bisa Anda ganti dengan gambar yang lain.
Selamat Mencoba ?!!
by Facebook Comment untuk Anda!
Artikel Terkait
Tutorial Blogger
- Membuat Efek Hover Transparan pada Gambar
- 3 Widget Animated Bird Twitter Follow untuk Blogger, Keren!
- Cara Meng-Upload Gambar Jumlah Banyak Pada Postingan Blogger
- Trik Sederhana Cara Proteksi Gambar di Blog
- Cara Membuat Open New Tab Pada Setiap Link di Blog
- Cara Menghilangkan Link Posting Lama dan Postingan Baru di Blog
- Cara Agar Postingan Blog Tidak Bisa di Copy
- Cara Membuat Efek Meteor Jatuh di Blog
- Cara Membuat Cursor Diikuti Bintang di Blog
- Cara Membuat Back To Top Dengan Double Click di Blog
- Cara Membuat Link dengan Efek Pelangi
- Cara Mudah Membuat Tampilan Blog/Web Maintenance
- Cara Membuat Efek Link Mengeluarkan Bintang
- Cara Membuat Refresh Otomatis Di Blog
- Cara Membuat Teks yang Di Block Menjadi Berwarna
- Cara Membuat Gambar Berjajar
- Tips Untuk Blogger Pemula
- Cara Memasang Widget Alexa Rank
- Membuat Link begerak bila disentuh kursor mouse
- Cara Mudah Pasang Kotak Komentar Facebook Pada Blogger
- Membuat Judul Blog Bergerak
- Mengukur Seberapa Berat Blog/Web
- Membuat Background Kotak Komentar Lebih Menarik
- Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot
