Mouse hover

Salam jumpa shobat blogger, Mungkin kita sering melihat gambar dapat membesar dengan sendirinya saat kita mengarahkan mouse kita pada salah satu gambar yang ada di web, nah mungkin kita juga ingin membuat nya,
ini contoh gambar yang membesar ssat kita sentuh mouse,
coba shobat arahkan mouse ke arah gambar di bawah ini, dan lihat apa yang terjadi


(1)_ 
(2)_           
 (3)_
 (4)_       
(5)_

 contoh gambar membesar saat di sentuh mouse

nah untuk pembuatannya gampang banget copas aja script di bawah ini

<style>
#gambar {}
#gambar img{width:200px; height:200px; -moz-transition:all 1s;}
#gambar img:hover{width:80%; height:100%;}
</style>
<div id="gambar">
<a href="#"><img src="alamat URL gambar">
</div>
pada width:200px; height:200px; itu untuk menampilkan gambar pada saat tidak di sentuh mouse
pada width:80%; height:100%; itu untuk menentukan zoom atau besarnya gambar saat di sentuh mouse dapat shobat danti sendiri
pada -moz-transition:all 1s; itu untuk mengatur kecepatan zoomnya
pada # itu merupakan link yang akan di tuju bila gambar nanti di klick
dan pada alamat URL gambar dapat shobat ganti gambar yang shobat inginkan

Selamat mencoba semoga bermanfaat.....
Enter your email address:

Link Exchange