cute bias list
Hye korang, arie nie ieqa nak ajar macam mana nak buat bias list. maksud nyer, kalau korang halakan cursor korang, korang kat pic tue, nama akan muncul. mey cney ieqa tunjuk. contoh nyer, korang boleh tengok kat about me.
1. copy code kat bawah nie.
<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>
2. Untuk Template Designer, korang paste kat page.
3. Untuk Template Classic, korang paste kat HTML korang.
4. Preview & save.
Biru : warna border
Pink: URL gambar
Hijau: nama
: Shafiqa'aziyatul Azie
: @ieqashafiqa
:ieqashafiqa
: My Blog
Post a Comment
Asslamualaikum~
thanks for the comments. no harsh word ok. :)