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









12 comments:

NUR AIN AZMAN said...

suke tuto ni.
NICE blog.
keep it up

FOLLOW u, follow me back
:)

Shera said...

thnx for this tutorial..
shera nak cuba la.. :)

Ila Mhd Noor said...

nak cube jugak tuto ni. tp klu taknak bentuk cmtu nk petak segi biasa jek camne?

Aida Omar said...

@NUR AIN AZMAN thnkz dear ^_^

Aida Omar said...

@Shera try la shera.. :)

Aida Omar said...

@Ila Mhd Noor tak pasti pula la ila sebab itu je biasa nye.. :)

Nurul Ain said...

Thank you

amira ezzati said...

thanks akak cumel !!

fawzeah zea said...

Cik Aida..zea cba tuto nie..jdi taw..heheheh happy sgtt =)

Diari Si Froggie said...

@Nurul Ain Welcome nurul ain :)

Diari Si Froggie said...

@amira ezzati welcome adik comel :)

Diari Si Froggie said...

@fawzeah zea ea? aida tumpang happy ha.. menjadi juga. Alhamdulillah :)

Related Posts Plugin for WordPress, Blogger...
Small Cute Green Pointer
 

Copyright © 2013 Reserved to Diari Si Froggie Design by Aida Omar