TUTORIAL : EFFECT ROUND HOVER PADA IMAGES

Assalammualaikum & Selamat sejahtera

hari ini pagi-pagi lagi terasa macam nak buat tutorial tentang ini

rasanya ada yang request dahulu, tapi dah tak ingat siapa,

maaf ya pada yang request tu

Almaklum lah dah tua..

nampak tak effect di sekeliling gambar ini?

siapa-siapa yang nak buat sila ikut step di bawah ini ok

Log in blog > design > Edit HTML > Tick expand widget templates 

tekan Ctrl + F untuk cari kod /* Header

dah jumpa? pastekan kod dibawah ini pada 

bahagian atas kod /* Header 

/*------ 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 #DF0174; -moz-box-shadow: 0px 0px 20px #DF0174; -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#DF0174; 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;

}

bagi kod yang saya merahkan korang boleh tukar ke kod HTML yang lain disini

preview dahulu kalau tiada sebarang masalah boleh terus SAVE