✿Baca Entry Yang Lepas✿

Saturday, February 23, 2013

Tutorial : Round Hover With Shadow (Untuk Image)


Salam

Tutorial tuk bila cursor sentuh image then gambar akan mengecil beserta shadow

1. Dashboard -> Design -> Edit Html

2. Higlight semua code,Tekan Ctrl+A , Cut the paste code ditempat yan sama. (Cara unhide kotak segitiga hitam cara mudah. Kalau tak buat macam ni, Korang tak dapat cari code kat bawah yang korang nak nanti)

2. Ctrl + F code bawah ni, dan jangan lupa tekan enter

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

 3. Copy code kat atas ni dan paste ke atas code yang korang cari tadi.

4. Yang kaler merah dalam code tu, korang boleh tukar ke code warna yg korang suka.
Boleh tengok SINI

credit to : NM


6 comments:

Remy hazza said...

tq....nice

Nadia Johari said...

tengok nant klo nad nak wat

C.T.K said...

cool...nampk ke kreatifan disitu :D

sa mic said...

lisa dah cuba buat, chantek! ;D

Muhammad Ebeni said...

buat bserta contoh gambar sekali..

Nur Nashwa Alia Khairudin said...

Macam mane nak buat supaya dia tak hover semua gambar-
pageviews graph
blog header
button like
g+1 button

Hmm. nampak burukkss.
Tolong..

Copyright © ✿Emas✿Putih✿Blog✿ Designed by azhafizah.com