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