TUTORIAL IMAGE ANIMATION HOVER

Ehem. Hyep . ini just nak buat tutorial yang direquestkan di shoutbox ku . hee . 

okay, tuto aku bernama seperti tajuk aku tu .  cer kome try sentuh mana2 lah gamba dlm blog ii nih , dia jd kelabuasap kan . so, nak buat tak ? just follow this step okay :)

1. Dashboard ---> Design ---> Edit Html 

2. Ctrl+F untuk cari koding ni :

 /* Header

3. dah jumpa ? okay . pastu korang copy dan paste kan jer koding ni dibawah koding  /* Header tadi tu ok. eh kejap , ini dia ada dua jenis taw , korang nak dia kelabuasap jer ker atau korang nak bagi gambar tuh kelabu asap plus dengan lengkuk sekali ? cer cite . hikhik. oke lah. korang pilih je kay nak yg mana.

ini kod untuk gambar jadi kelabuasap sahaja. (mcm dlm page saya :)

/*------ 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;}

ini kod untuk gambar jadi kelabuasap+lengkuk . 

/*------ 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;} 

p/s: kod warna yang ditaip dgn tulisan purple tuh boleh tukar .  klik SINI untuk ambil code warna.

ini contoh gmbar yang disentuh oleh cursor lalu menjadi kelabuasap+lengkuk :

4. Save kan jer . KLIK SINI please,thnxbai :)

oke,siap. selamat mencubaaa :D

LOVE ; ♥ misluvcoklat ♥