Tutorial : Curved Border Picture Hover
Assalamualaikum ♥
Sarah CK : ehh, nak tanya boleh? macam mana awak buat gambar tu jadi melengkung kalau cursor dekat pada gambar? ada tuto tak?
1. Dashboard > Template.
2. Search code </style>
3. Paste this above the code :
img {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transition: 0.5s;
}
img:hover {
filter: alpha(opacity=50);
opacity: .5;
-webkit-border-top-right-radius:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-transition: 0.5s;
}
Biru : Curved picture sebelum hover.
Hijau : Curved picture semasa hover.
Merah : Kelajuan hover.
Bold : Opacity gambar semasa hover.
Labels: Tutorial
Tutorial : Curved Border Picture Hover
Assalamualaikum ♥
Sarah CK : ehh, nak tanya boleh? macam mana awak buat gambar tu jadi melengkung kalau cursor dekat pada gambar? ada tuto tak?
1. Dashboard > Template.
2. Search code </style>
3. Paste this above the code :
img {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transition: 0.5s;
}
img:hover {
filter: alpha(opacity=50);
opacity: .5;
-webkit-border-top-right-radius:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-transition: 0.5s;
}
Biru : Curved picture sebelum hover.
Hijau : Curved picture semasa hover.
Merah : Kelajuan hover.
Bold : Opacity gambar semasa hover.
Labels: Tutorial
Profile
The Girl Behind The Laptop
★ In short, I am :
• A malay muslim.
• Lives in Terengganu, studies in Selangor.
★ Bloggie :
• Created since 24 November 2009, five days after celebrating my 10th birthday.
• Created by
Ummi because I was interested in blogging when I saw she's updating her blog.
• Sesuci Kejora has been here for almost 11 years. Big applause :')
