Tutorial: Round Hover

assalamualaikum ..

 sebelum tido nih,, saya nak buat satu tutorial yang direquest ..

sebenarnya, yang jadi bulat tu ialah hover ..

bila cursor sentuh kat mane2 gambar, gambar tu akan jadi bulat ..

ini cara2 nya k ..

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

2. Cari kod kat bawah ni .. (Tekan Ctrl + F serentak)

/* Header

3. Copy and paste kod ni kat atas kod yang tadi

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

*merah : boleh tukar ikut warna kesukaan korang k..

4. Dah siap,, and boleh save ..

oke,, macam biasa ..

bagitau saya jadi or tak jadi k .. :)