Membuat Gambar Membesar Ketika Cursor Mouse Melinatas atau Berada di Atas Gambar

Masih seputar gambar, kalo postingan sebelumnya saya jelaskan bagaimana membuat gambar pada postingan menyusun horizontal nah sekarang masih seputar gambar yaitu cara agar gambar membesar ketika cursor mouse melintas atau berada di atas gambar kurang lebih seperti itu judul postingannya soalnya saya bingung mau nulis judul apa yang cocok untuk postingan ku kali ini daripada sobat kebawa bingung liat aja demonya di bawah dan letekan cursor mouse di atas gambarnya.

Nah kurang lebihnya seperti itu sob demo-nya. Gimana sobat ingin coba yuk ikuti caranya. Kodenya di bagi menjadi dua bagian sob yaitu kode css dan html pelaksanaan.

Pertama sobat login nah dari dasbor klik rancangan => edit html

Setelah itu centang kotak kecil yang berada di atas kolom kode htm seperti biasa sob dan cari kode ]]></b:skin> gunakan ctr+f atau F3 untuk mempercepat pencarian.

Setelah ketemu kodenya simpan kode di bawah di atas kode tadi.

/*------- THEANT ZOOM-OUT ZOOM-IN -------*/

.theantzoom { 

padding:5px; 

position:fixed; 

bottom: 35px; 

right:10px; 

cursor: pointer; 

text-decoration: none; 

border: 0px solid transparent; 

-moz-transition: all 0.3s ease-out;  

-o-transition: all 0.3s ease-out;  

-webkit-transition: all 0.3s ease-out;  

-ms-transition: all 0.3s ease-out;  

transition: all 0.3s ease-out;  

}

.theantzoom:hover  { 

  zoom: 2; 

  text-enlarge: 2; 

  -moz-transform: scale(2); 

  -o-transform: scale(2); 

  transform: scale(2); 

}

Setelah kode selesai di paste kemudian klik simpan.

Nah untuk memanggil atau penggunaannya sobat pakai kode berikut.

<a href="URL OF PAGE" class="theantzoom"><img  width="60px" height="60px" src="url image sobat disini.jpg" alt="back to top"  /></a>

Lihat kode yang berwarana merah sobat ganti dengan url terserah sobat mau url apa yang jelas fungsinya ketika images di klik maka halaman akan berpindah ke halaman url tersebut.

Dan untuk kode yang warna biru sobat ganti dengan url gambar sobat.

Silahkan sobat utak atik sendiri kodenya nah untuk merubah besar dan kecilnya gambar ketika do sorot cursor mouse sobat ganti kode di atas yang berwarna kuning.

Cukup sekian postingan kali ini yaitu cara membuat gambar membesar ketika di lewati mouse atau gambar membesar ketika disorot cursor mouse dan atau juga cara agar gambar akan membesar ketika mouse di atasnya atau melintasi gambar dan atau apa lah itu judulnya yang pnting sobat paham dari postingan ini selamat mencoba. Ohh ia kode ini saya dapet dari paman saya yang baik loh yang suka memberikan solusi ketika saya bingung i like my uncle.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.