Monday, August 8, 2011

Cara membuat image hover

Image Hover adalah sebuah effec untuk memperbesar gambar ,tentunya semua bisa bekerja dengan baik karena memanfaat kan css3 animasi ,berikut adalah contoh contoh gambar yang bekerja dengan baik karena adanya hasil Css3 image hover




Cara menempat kan kode css nya adalah sebagai berikut
  1. loggin ke blogger
  2. masuk rancangan edit html
  3. untuk menjaga apabila terjadi kesalahan downloud template lengkap dulu
  4. Cari kode]]></b:skin> lalu letak kan kode di bawah ii tepat diatas kode ]]></b:skin>
  5. Kode Css nya: <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>
  6. Save Template
Dan untuk menempatkan kode HTML NYA:


<div class="hovergallery">
<img src="masuk kan url gambar disini" />

<img src="masuk kan url gambar disini" />

<img src="masuk kan url gambar disini" />

<img src="masuk kan url gambar disini" />

<img src="masuk kan url gambar disini" />

<img src="masuk kan url gambar disini" />

</div>
 Oke selamat mencoba semoga berhasil.......................

No comments:

Post a Comment