Cara Membuat Efek Zoom Gambar saat Dilalui Kursor

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.

Ingat !! Jangan sampai lupa di SIMPAN ...
Selamat Mencoba ?!!

---

by Facebook Comment untuk Anda!

---

Artikel Terkait

---

---