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