Hover :
1. Copy code bawah ni
<style>.icon2 {margin: 5px;width: 100px;height: 100px;overflow: hidden;position: relative;border: 3px solid #BBBBBB;float: left;}2. Template designer. Paste dalam page
#bias {position: absolute;display: block;width: 300px;height: 30px;top: 30px;margin-left: -20px;opacity: 0;text-align: center;color: #fff;background: #7C7C7C;-webkit-transition-duration: 0.8s;border-top: 3px solid #BBBBBB;border-bottom: 3px solid #BBBBBB;line-height: 4px; text-transform: uppercase ;-webkit-transform: rotate(-30deg);font-size: 12px;font-family:arial;}
.icon2:hover #bias{left: 20px; top: 60px;bottom: 5px; opacity: 1;width: 103px; height: 20px;line-height: 20px;-webkit-transform: rotate(0deg)}
</style><table border="0" bordercolor="" cellpadding="3" cellspacing="0" style="text-align: center; width: 520px;"><tbody><tr> <td><div class="icon2"><img src="URLIMG" width="100px" /><br /><div id="bias">Name</div></div></td>
<td><div class="icon2"><img src="URLIMG" width="100px" /><br /><div id="bias">Name</div></div></td>
<td><div class="icon2"><img src="URLIMG" width="100px" /><br /><div id="bias">Name</div></div></td>
<td><div class="icon2"><img src="URLIMG" width="100px" /><br /><div id="bias">Name</div></div></td> </tr><tr> </tr></tbody></table>
3. Template classic. Paste dalam HTML
4. Preview & save.
Biru : warna border
Pink : URL gambar
Hijau : nama
Credit to : AtiQah
0 comments:
Post a Comment