图片悬停效果

Question

这是我创建http://jsfiddle.net/pAQTn/

如果你看到现在的工作是由20％的图片尺寸放大和重叠到表中的图像悬停方式的小提琴。

如何放大图像并同时放大桌子的尺寸。 这是我的代码。

<table border="1"> 
    <tr> 
     <td> 
      <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100"> 
     </td> 
     <td> 
      <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100"> 
     </td> 
     <td> 
      <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100"> 
     </td> 
    </tr> 
</table> 

这里是CSS

img:hover { 
    border:1px solid #0000ff; 
    width:120%; 
    height:120%; 
} 

Answer 1

用于%到px因为这样

img:hover{ 
    border:1px solid #0000ff; 
    width:120px; 
    height:120px; 
} 

Demo

Answer 2

截至上面所暗示的，你不能使用％。如果使用％，它会尝试将高度和宽度设置为容器的120％，因此显然无法重新调整容器大小，否则将不得不再次调整图像大小，这显然会无限地进行。

如果你将图像包装在另一个元素，即div中，它可能会做你正在寻找的东西，但我没有试过它。

编辑：该分区没有工作！

Answer 3

你需要做的是转换%到px，比使用position: absolute;让你的细胞不会移动

Demo

img:hover{ 
    border:1px solid #0000ff; 
    width:120px; 
    height:120px; 
    position: absolute; 
}