Tutorial : Round Hover Image~★
Apa maksud round hover image? Err, susah sedikit nak explain. Lihat gambar di bawah utk penjelasan.
 |
| Gambar original |
 |
| Bila cursor sentuh image akan jadi camni. |
Ok. Sudah faham? Follow step kat bawah ni utk dapatkan efek macam gini. :)
1. Pegi Dashboard -> Design -> Edit HTML -> Tick Expand Widget Templates
2. Tekan Ctrl+F utk cari code ni.
/* Header
3. Da jumpa? Copy dan paste code di bawah ni ATAS code yang korang cari tadi.
img {
filter:alpha(opacity=100);
-webkit-transition-duration: 0.8s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .60;
-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;
border: 1px solid #FF3366;
border-radius: 50px;
-moz-border-radius: 50px;
}
4. Tukar code colour
merah mengikut colour yang korang suka.
5. Da siap. Save!
Labels: tutorial
Hearts, Ivy Wong
Le blog mistress~★
Name :
Ivy Wong Lye Kwan
Age :
20 years old T_T
Birthdate :
16 August 1993
Nationality :
Malaysian
Current study place :
Singapore Polytechnic
Language :
English, Malay, Cantonese, Mandarin
I
LOVE Running Man.
I'm addicted to
chocolates
I'm
shy around strangers. But I'm
crazy around my peeps and besties.
I'm a proud
VIP. (what BIG BANG fans call themselves)
I have
Lil Stitch as a gift from my dearests. It's not a litle, but a big stuffed toy :3
I can be very sensitive at sometimes. and I mean
VERY SENSITIVE
Wanna know more about me, please leave your question at the chatbox.
Tutorial : Round Hover Image~★
Apa maksud round hover image? Err, susah sedikit nak explain. Lihat gambar di bawah utk penjelasan.
|
| Gambar original |
|
| Bila cursor sentuh image akan jadi camni. |
Ok. Sudah faham? Follow step kat bawah ni utk dapatkan efek macam gini. :)
1. Pegi Dashboard -> Design -> Edit HTML -> Tick Expand Widget Templates
2. Tekan Ctrl+F utk cari code ni.
/* Header
3. Da jumpa? Copy dan paste code di bawah ni ATAS code yang korang cari tadi.
img {
filter:alpha(opacity=100);
-webkit-transition-duration: 0.8s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .60;
-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;
border: 1px solid #FF3366;
border-radius: 50px;
-moz-border-radius: 50px;
}
4. Tukar code colour
merah mengikut colour yang korang suka.
5. Da siap. Save!
Labels: tutorial
Hearts, Ivy Wong
