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