Tutorial : Round Hover
15 June 2011

assalamualaikum guys ! hari ni aku nk bt tutorial round hover.. ape tu round hover? round hover tu bila kite letak cursor kt mane2 gambar dlm blog kiite,, die akan jadi bulat atau bujur.. cube korg gi kt gamba aku dlm blog ni,, die jadi bulat kan? ha! tu la die.. so tanpa membuang angin masa,, jom kite mulakan!

1. Dashboard --> Design --> Edit HTML --> Tick Expand Widget


2. Tekan Ctrl+F dan carik code yang kat bawah nih..
                                /* Header


3. Dah jumpa ,copy code kat bawah nih ,pastu paste kat ATAS code yang u'alls carik tadi kayh?




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



4. yang warna merah tu,, korg leh tukar mengikut warna kesukaan korang.. warna tu utk shadow kot.. kalo x salah aku la.. nk tukar warna search je kat Encik Google "html colour code" k?


p/s: kalo ade prob, kasi tau aku.. komen je kt bawah tu n aku akan try bantu korg..