Saturday, December 29, 2012

Tutorial : Image Hover #7

Tumblr_med5f14gcn1qj39tmo1_500_large

LIVE PREVIEW
Sebenarnya tuto ni lebih kurang sama je dgn tuto ke-6 SINI , cuma hover die atin delete untuk ke sebelah kiri n kanan.... klo dh faham boleh cuba try OK.
  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
Kiri
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{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
box-shadow:inset -600px 0px 1px #FCDFFF;}
Kanan
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{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
box-shadow:inset 600px 0px 1px #FCDFFF;}

No comments: