Tutorial Animation with Round Hover

selamat sejatheraa!!!!
hari ni nak wat tutorial ni sebab ada permintaan dari kawan saya sowang ni..



 daripada cik bella ite ni...

okla..jom ite start da tuto ya!!!

mula-mula...


1. Dashboard > Design > Edit Html > Tick Expand Widget Templates

2. Tekan F3 atau Ctrl+F cari CODE kat bawah ini :


/* Header

3. Dah jumpa code tu??..lau da jumpa PASTE code kat bawah nie pula kat ATAS code yg korang cari tadi tu ok ?:)

 /*------ 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 #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -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#FF3366; 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 ; Tukar yang saya colourkan pink mengikut color yang korang suka ok ? tak nak tukar pun takpe..hehehe

4. Da siap . SAVEterus dengan rasa bangga k...

kalau ade yang tak faham...bertanyala k...time ace...

terima kacehh!!!

da belajar tu,tingalkan komen tanda terima kasih dan berpuas aty k..

tak baik taw curik-curik belajar tanpa berterima kasih..

saya gembira anda komen :-)

2 orang tengah mencarut:

bella hamzah said...

aaa cik cemoxx buat untuk bella .. hhhe terharu... thanx cik cemoxx :)

Joan Jairey Gubod Gondiloh said...

@bella luna

sama2 cik bella...