Projek Syiqin™: Hover Image Text Versi Mini

Hai..? Tanpa membuang masa. Ayuh kita mulakan.

Nak selit komik ni jap...

???	???	???	???	???
???	???	???	???	???
???	???	???	???	???
???	???	???	???	???
???	???	???	???	???
???	???	???	???	???
???	???	???	???	???
???	???	???	???	???

Hah...inilah dia. Cuba hover kat image tu..keluar apa?

Perkataan, kan? Meh..Ikin tunjuk ajar pada korang.

Pergi mana-mana page. Contoh post, halaman, HTML/JavaScript.

Copy kod di bawah..

Lepas tu, paste dalam ruangan

<style>
.icon2{ width:90px; height:118px; border:5px solid #FF8E8E; box-shadow:2px 2px 5px #ccc;margin:5px;}
#bias{position:absolute;
margin-top:-60px;opacity:0;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background:#FF8E8E;
width:90px;
text-align:center;
color:#FFFFFF;
font-size:12px;
letter-spacing:1px;}
.icon2:hover #bias{margin-top:-40px;opacity:1}
</style>
<br />
<table border="0" bordercolor="" cellpadding="3" cellspacing="0" style="width: 520px;">
<tbody>
<tr>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
</tr>
<tr><td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td>
<td><div class="icon2">
<img src="URL Image" width="90px" /><br />
<div id="bias">
Letak nama atau ayat..</div>
</div>
</td></tr>
</tbody></table>