Efek Bump
*menggunakan css yang ringkas
Klik sinidan lihat pada efek bump
Pastekan kod ni sebelum/diatas kod ]]></b:skin>
.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}
.gobump img:hover {
margin-top: 2px;
}
Cara penggunaan kod adalah seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfIOEKA2XWIHRrTto2Yb6CUvJdIZ3_LloCqkfEy9hdKaPYuDhUQLy47BCU82TDjYRomE8tnXdYGku0Xp_4BrO9r0ELpHRrQjwfwSKUZkfd2bc4Lb10m_3ojRTV7nJypE07FYw0G9f2uI/s1600/bump_sign_W8-1_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfIOEKA2XWIHRrTto2Yb6CUvJdIZ3_LloCqkfEy9hdKaPYuDhUQLy47BCU82TDjYRomE8tnXdYGku0Xp_4BrO9r0ELpHRrQjwfwSKUZkfd2bc4Lb10m_3ojRTV7nJypE07FYw0G9f2uI/s1600/bump_sign_W8-1_large.jpg" border="0" height="240" width="320" /></a></div>
*kod hijau class="gobump" adalah perlu untuk menyatakan kelas css bagi kod gambar.
*kod merah adalah kod gambar.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.