Hover image merupakan sebuah pembesaran pada gambar. Efek ini cukup menarik dan akan tambah menarik ketika anda menambahkan efek lainnya, seperti efek bayangan dan akan terlihat lebih atraktif jika anda menggunakan browser firefox 4.0 beta 9. Sebelumnya saya juga pernah memposting cara membuat efek zoom pada gambar menggunakan expando effect. Selain itu saya juga telah memposting cara membuat efek zoom pada gambar dengan menggunakan jquery image magnify v1.1.Silahkan anda baca dan bandingkan dengan materi posting kali ini untuk Demonya lihat disini. yap gak usah banyak basa basi, langsung aja kita kupas bagaimana Cara membuatnya :
1. Login blogger
2. Pilih Tata Letak/Rancangan,
3 Lalu Edit Html, jangan lupa Centang
4. Dan Copy paste kode berikut diatas Kode ]]></b:skin>
ImgD{
float:left;}.rad10R{float:right;}
.rad10C,.rad10C0{
float:none;display:block;margin:0 auto;
}
.ImgD:hover {
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;
box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-moz-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-webkit-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-o-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-moz-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-webkit-transform:scale(1.4) translate(40px,40px) rotate(0deg);
background:#555;-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-out;
-webkit-transition: all 1.2s ease-in;
}
5. Kemudian Simpan Templete
Untuk memanggilnya anda bisa menaruhnya di sidebar ataupun di postingan, copy kode dibawah ini:
<img class="ImgD" height="162" id="#" src="http://i44.tinypic.com/11icnk5.jpg" style="height: 162px; width: 200px;" width="200" />
Gantilah yang berwarna Merah dengan Alamat Image anda
Selamat mencoba...
<<SEBELUMNYA DAFTAR ISI BERIKUTNYA>>
0 komentar :
Posting Komentar