April 17, 2011 | 2:11 PM
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
2. Tekan ctrl+f cari kod
/* Header3. 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;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}*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. :]
Salam. Nak tanya. Kat dalam gambar tu, dia terang agak lambat. Tapi bila saya guna tu, die terang cepat sangat laa. Macam mana ek nak bagi dia terang lambat and slow2 mcm akk punya tu? Thanks :)
awak tambah code nie sebelum }
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;