html图片浮动特效

html图片浮动特效

html代码：

  <div >
    <table border="0" >
    <tr >
    <td width="200",height="300">&nbsp;</td>
    <td width="200",height="300">&nbsp;</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">&nbsp;</td>
    <td width="200",height="300">&nbsp;</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代码：

 div img.mid1{ 
            width: 500; 
                cursor: pointer;  
                transition: all 0.6s;  
            }  
            div img.mid1:hover{  
                transform: scale(1.4);  

            }  

效果截图：