Sunday, December 30, 2012

Tutorial : Image Hover #8



Hye2, Macam biasalah Image hover haha.. Ok unuk yang hover ni maybe jarang orang buat kot>< . Hover yang ni, bile korang hover kat photo nanti akan ade bayang2 kat bawahnye. Sebenarnya ada 2 part tau yang part ke-2 nanti atin tunjuk, kalau nak jenis pertama boleh try k. tekan preview tau.

  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 


img{
padding:4px;
-webkit-box-reflect: below 0px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)))
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img:hover{
opacity: 1;-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
 left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}



------------------------------------------------------------------------


Untuk jenis ke dua sama je, just kalau korang nak tambah border effect boleh guna yang jenis hover ke-2 ni k.



  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 

img{
margin: 25px; opacity: 0.8; border: 10px solid pink;
/*Transition*/ -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
/*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
img:hover{
opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear,
 left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

hijau : ketebalan border
merah : code color


No comments: