> > Cara membuat image hover

Cara membuat image hover

Unknown

: 20.35 5 comments

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>
  5. 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.......................
Judul Artikel :Cara membuat image hover
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat image hover Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

5 komentar

avatar
Balas
Konterporer2013 delete 30 Mei 2013 pukul 20.05

makasih gas atas infonya, ane cobain dulu ya...

avatar
Balas
Unknown delete 31 Mei 2013 pukul 10.25

Sebelum nya mohon maaf mungkin demo di atas sudah tidk berfungsi karena adanya perubahan template tapi yakin tutorial di atas dapat bekeja dengan sempurna

avatar
Balas
Unknown delete 31 Mei 2013 pukul 10.30

Sekedar nambahin naruhnya Dibawah kode ]]></b:skin> bukan di atas kode ]]></b:skin> seperti tutorial di atas

avatar
Balas
Stiker Jalingkut delete 31 Mei 2013 pukul 13.21

hehehhehe aq mau taroh di warung kopi om xixixix

avatar
Balas
Unknown delete 31 Mei 2013 pukul 15.35

wah tukang kopy baru keliatan ..he he he

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi