CSS3 Hover Galeri Gambar

Penulis: Dynamic Drive
Sebuah galeri foto ramping yang mengambil keuntungan dari CSS3 animasi, bayangan, dan " mengubah"properti untuk langsung menambahkan efek hover halus untuk gambar nya, dimana memperbesar gambar dan bergerak lebih dekat ke pengguna.
Efek hover saat ini bekerja terbaik di Google Chrome, Safari 4 +, dan Opera 9.5 +. Di FF 3.6, animasi CSS dilewati, sementara di IE, efek keseluruhan tidak terlihat.

Simpan Kode Di bawah ini tepat di Bawah /head !!!

Select All
<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*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*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>
Lalu Tambah Gadget HTML Dan Masukan Kode di bawah Ini !! dan jangan lupa ganti UrlGambarAnda.jpg dengan url Gmbar Anda .
Select All
<div class="hovergallery"> <img src="UrlGambarAnda.jpg" /> <img src="UrlGambarAnda.jpg" /> <img src="UrlGambarAnda.jpg" /> <img src="UrlGambarAnda.jpg" /> <img src="UrlGambarAnda.jpg" /> <img src="UrlGambarAnda.jpg" /> </div>

Terima kasih telah membaca artikel tentang CSS3 Hover Galeri Gambar di blog Indo Elektronika jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Suka artikel ini? Bagikan :

FacebookGoogle+