Tutorial : Cute Bias

Example

Hover
Boleh tengok >> Live Preview <<

Ni lah Cute Bias tu. Sesuai untuk korang letak kat sidebar , macam nak letak gambar percutian ke, bila kita hover mouse kat pic , akan keluar nama.

Korang boleh letak dalam entry atau sidebar.

<style>.icon2 {
margin: 5px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border: 3px solid #BBBBBB;
float: left;
}
#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>

Ungu : Url Image korang
Hijau : Nama untuk image korang tu

0 Comments