HTML image floating effect
html code:
<div >
<table border="0" >
<tr >
<td width="200",height="300"> </td>
<td width="200",height="300"> </td>
<td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid1.png" width="200",height="300"> </td>
<td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid2.png" width="200",height="300"> </td><td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid3.png" width="200",height="300"> </td><td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid4.png" width="200",height="300"> </td></tr><tr ><td width="200",height="300"> </td><td width="200",height="300"> </td>tr ><td width="200",height="300"> </td><td width="200",height="300"> </td>tr ><td width="200",height="300"> </td><td width="200",height="300"> </td>
<td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid5.png" width="200",height="300"> </td>
<td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid6.png" width="200",height="300"> </td><td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid7.png" width="200",height="300"> </td><td width="200",height="300"> <a href="2.html"><img class="mid1" src="img/mid8.png" width="200",height="300"> </td></tr> </table>
</div>
css code:
div img.mid1{
width: 500;
cursor: pointer;
transition: all 0.6s;
}
div img.mid1:hover{
transform: scale(1.4);
}
Screenshot of the effect: