Sunday, April 17, 2011

[Tutorial] Image Animation Hover

salam readers~

disebabkan aku dah takde idea nak buat entri apa so tangan aku yang gatal miang rajen nak menaip nie nak buat tuto pulak. kali nie pasal image animation hover.
tak tau apa kebendanya tu? korang try lerak cursor kat gambar bawah ni kejap.


dah paham dah? oke. ni stepssss dia okeh? :]

1. Pegi Dashboard > Design > Edit Html
2. Tekan ctrl+f cari kod
/* Header
3. then copy code ni kalau korang nak buat hover yang ade lengkuk macam yang aku tu.
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}

*code warna merah tu korang boleh tukar. yang tu untuk color shaded area. PICIT SINI kalau nak tau code warna tu.

4. tapi kalau korang tak nak yang lengkuk tu korang boleh copy code nie :
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}
5. Paste kan kat bawah code step 1 tu okeh.


6. Save dan lihat hasilnya. :]
signature2

No comments:

Post a Comment

Thanks for comment. Come again! ^_^