Efek Gambar Zoom Jika Dilalui Cursor

Halo sobat mampirbro. Kali ini saya ingin berbagi tutorial blog bagaimana cara membuat gambar menjadi besar jika dilalui oleh kursor. Sebelumnya saya juga pernah memostingkan cara membuat efek zoom pada gambar dengan cara mengklik gambar tapi cara tersebut sudah tidak bisa lagi digunakan (liat disini). Nah kali ini kita akan memakai cara baru yang dimana gambar akan menjadi besar otomatis apabila kursor diarahkan ke gambar dan akan mengecil kembali jika kursor menjauh dari gambar. Mau tau caranya? Cekidot bro...

Berikut Caranya:

• Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".


• Carilah kode ]]></b:skin>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.




.hovergallery 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 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}




• Simpanlah template sobat.


• Untuk memasukkan efeknya pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek. Berikut kodenya:




<div class="hovergallery"> URL GAMBAR SOBAT </div>




• Ganti teks berwarna merah dengan link dari gambar sobat. Contohnya seperti dibawah ini:




<div class="hovergallery"> <img src="http://i.imgur.com/IA3l9.jpg" alt="" title="Hosted by imgur.com" /> </div>




• SELESAI

Hasil Dari Efek Zoom Cursor

Semoga berguna dan bermamfaat...

Seluruh artikel postingan pada blog ini dapat di copy-paste dengan syarat menuliskan sumbernya dan memasang link aktif blog ini pada blog sobat | Bagi Sobat yang menemukan link download bermasalah (brokenlink) dapat memberitahu saya di sini

Gunakan layanan 4shared generator (klik di sini ) untuk mempermudah mendonwload file dari 4shared tanpa perlu login.

Artikel Terkait:

Blog Tutorial

• Alternatif Expand Template Widget
• Cara Membuat Widget Random Article
• Membuat Sendiri Aplikasi Android Untuk Blog
• Membuat Form Kontak Admin
• Pasang Tombol Sharing Lintas.Me
• Membuat Sendiri Aplikasi Symbian Untuk Blog
• Membuat Email Dengan Domain Sendiri Gratis
• Cara Mengarahkan Gambar Google Ke Blog
• Membuat Judul Blog Bergerak Di Browser
• Membuat Anti Select Text Pada Postingan
• Mengatasi Tata Letak Blog Yang Tidak Teratur
• Widget Free Proxy
• Cara Pasang Slider Carousel Di Blog
• Menampilkan Widget Hanya Pada Halaman Postingan
• Pasang Widget Follower Box Twitter
• Widget Random Ayat Al-Qur'an Di Blog
• Membuat Footer 3 Kolom Di Blog
• Widget Random Kata-Kata Mutiara Islami
• Parse HTML Tool
• Cara Praktis Pasang Foto Di Hasil Pencarian Google
• Pasang Meta Tag Friendly SEO Super
• Buat Flash Banner Online
• Cara Pasang Widget Pop-Up Di Tengah Blog
• Cara Upload File Flash Ke Google Site
• Widget Cek Lokasi Dari No.Handphone