Sunday, November 6, 2011

Efek Image Hover (Efek neon & membesar pada gambar)

Efek imagehover akan muncul ketika anda mengarahkan kursor anda pada suatu gambar diblog,,  Contohnya ada pada blog ini,ketika anda mengarahkan kursor anda pada gambar di blog ini, maka muncul efekwarna/neon pada gambar tersebut. . .
Tapipostingan yang saya Share kali ini adalah gambar memiliki efek neon danmembesar ketika di sorot kursor. .
Langsung sajadehh praktekin,,
Login keBlog anda terlebih dahulu
Kemudian pilihtemplates
Pilih editHTML
Copy kode yangberbarna merah di bawah ini
img:hover{
-moz-transform:translate(4em,0pt);
-webkit-transform:translate(4em,0pt);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
-webkit-shadow: 1px 1px 20px #ffd700, -1px -1px 50px #FF0000;
-moz-shadow: 1px 1px 20px #ffd700,-1px -1px 50px #FF0000;
box-shadow: 1px 1px 20px #ffd700, -1px -1px 50px #FF0000;
}

Lalu paste pada template anda
Contoh:
a:hover {background-image:url(http://i1237.photobucket.com/albums/ff473/muhammadsuteja/stars.gif);
                color :$linkhovercolor;
                text-decoration:underline;
font-weight:bold;
font-size:NONE;
text-shadow:0 0 10px Fuchsia;
}

img:hover{
-moz-transform:translate(4em,0pt);
-webkit-transform:translate(4em,0pt);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
-webkit-shadow: 1px 1px 20px# ffd700, -1px -1px 50px #FF0000;
-moz-shadow: 1px 1px 20px# ffd700,px -1px 50px #FF0000;
box-shadow: 1px 1px 20px # ffd700,-1px -1px 50px #FF0000;
}

Keterangan:    angka 20 dan 50 adalah lebar efek neon padagambar
                        ffd700 dan FF0000 adalahwarna efek neon pada gambar
Selahkan ganti sesuai keinginan anda

Save Template dan Lihat hasilnya..
Selamat mencoba

Blog Archive