Tutorial : image hover (Blur > Normal)
Live preview
OK...Korang dah tengok kan preview kat atas...kalau korang berminat dengan style picture tu....korang boleh ambil code di bawah....
- Blogskin/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>
- Then korang copy code di bawah and paste URL gambar yang korang nak
<div class="blur pic"> <img src="URL IMAGE"></div>
0 Comments:
Post a Comment