Official Tutobies Blog by Aimi Rahim

ENTRY ABOUT LINKS TUTO F'BOOK TWITTER BLOG +1 NEWER OLDER +FOLLOW

Tutorial : Image Hover 11 (Border)


Assalamualaikum . Image hover kali ni ialah bila korang halakan cursor ke gambar . Gambar tuh akan membentuk satu border keliling gambar . Harap korang dapat bayangkan macam mana . :)

Blogskin/Classic Template
1. Dashboard > Template
2. Press F3 dan cari code </style>
3. Copy code di bawah ni 
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FFE8E8;
}
img:hover{
box-shadow:inset 260px 0px 1px #FCDFFF,
inset -260px 0px 1px #F9B7FF;}
4. Paste code di atas code yang korang cari tadi
5. Preview & save

Template Designer
1. Dashboard > Design > Edit HTML > Tick Expands Widget
2. Press F3 dan cari code ]]></b:skin> 
3. Copy code kat bawah ni
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FFE8E8;
}
img:hover{
box-shadow:inset 260px 0px 1px #FCDFFF,
inset -260px 0px 1px #F9B7FF;}
3. Paste code di atas code yang korang cari tadi
4. Preview & save

Credit to : AtinTory

0 Comment[s] |