Menu Melayang

Jumat, 01 Agustus 2014

Script Memperbesar Image dengan CSS


Berikut file css nya, untuk memperbesar gambar yang di hasilkan silahkan edit nilai tranformscale :
.zoom 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}
.zoom img: hover{-webkit-transform: scale(2.5); -moz-transform: scale(2.5);-o-transform:scale(2.5); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray;opacity:1}

Script di atas di simpan dengan file css kemudian lakukan pemanggilan dengan script di bawah ini :

<div class="zoom">url image</div>

dan hasilnya saat mouse di letakkan di image maka image akan membesar otomatis.

Selamat Mencoba

Blog Post

Related Post

Back to Top

Cari Artikel