« »
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
/* 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;}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. :]
signature2



2 Comments

Blogger Nad Ezrin said...

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 :)

 
Blogger apple ♥ sidz said...

awak tambah code nie sebelum }

-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;

 

Post a Comment

No harsh word here please. Thanks for the comments :)



|


Disclaimer



This blog belongs to Nur Liyana. No ripping, spamming and copying w/o my permission. Respect me and I'll respect you. Thank you :)





Tagboard





Credits


This template 100% made by me. Nur Liyana Yahaya. With little help from my old skins and Dinamic Drive. For header and background, I used Photoshop CS5. Color got from HTML color code. Font from Dafont and Google Web Font. Gifs picture made by me and some taken from Tumblr. Other image get from We♥It, Google and Tumblr. Kindly inform me if I'm using your materials but i don't mention here. (c) Copyright by Akira Himesama. All right reserved 2012 (c)