Sunday, July 22, 2012

Tutorial : Image Hover Stlye 3


Tumblr_m37eguy42d1rti8r3o1_500_large
Untuk image hover stlye 3 pulak . Image hover melengkung . Maknanya bila cursor pegi kat image , automatic melengkung :)


For Blogskin

 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code bawah ni:
img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}
 Paste code tu di atas </style>
 Preview & save.

        

For Design

 Design > Edit HTML > Tick Expand Widget Templates
 Press Ctrl + f serentak dan cari code
/* Header
----------------------------------------------- */
 Kemudian, copy code dekat bawah ni
 img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}
 Paste di bawah code tadi
10.Preview & save
 
Design tuto : Atiqah

No comments: