Judul : Cara membuat image hover
link : Cara membuat image hover
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
- loggin ke blogger
- masuk rancangan edit html
- untuk menjaga apabila terjadi kesalahan downloud template lengkap dulu
- Cari kode]]></b:skin> lalu letak kan kode di bawah ii tepat diatas kode ]]></b:skin> Kode Css nya: <style type="text/css">
- Save Template
.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>
<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.......................
Demikianlah Artikel Cara membuat image hover
Sekian Cara membuat image hover, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.