Friday, January 11, 2013

Tutorial : Image Hover #12


BLUR>NORMAL

안녕하세요 , こんにちは . Assalamualaikum. Image hover kali ni ialah blur.. Ape itu blur? haha merepak je. Ok sebabkan Atin tau korang nak kene mood kan? So Atin ada bagi 2 cara normal n blur.. boleh pakai mana2 yang korang rasa nak blurkan tu >< . Cllick preview bagi untukyang nak blur ke normal..


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

<style type="text/css">
/*BLUR*/
.blur img {
 -webkit-filter: blur(5px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(0px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
</style>
  • Next,copy code bawah ni dan paste gambar yang korang nak blurkan tu 
<div class="blur pic">
  <img src="URL IMAGE"></div>







NORMAL > BLUR

  • Blogskins/ Classic template : Paste codes ni selepas code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
<style type="text/css">
/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}
</style>
  • Copy code bawah ni dan paste gambar yang korang nak blurkan tu 
<div class="blur pic">
  <img src="URL IMAGE"></div>

No comments: