html - 将鼠标悬停在图像上，图像的其余部分将出现，但超出 css 范围

Question

我有以下代码http://jsfiddle.net/tbedf/5/它可以工作。但我想知道我是否可以做一些事情，当图像在悬停后显示为全尺寸时，完整的图像会出现在顶部下面的图像，而不是把图像一直向下推。

li { float:left; height:100px; overflow:hidden; margin:10px; }
li:hover { height:auto; }

提前谢谢您，如果您不清楚，请告诉我。

Answer 1

你可以使用这个 CSS：

li {float:left; height:100px;  position:relative; overflow:hidden; margin:10px; }
img {position: relative; height:auto; left:0px; top:0;}
li:hover { overflow:visible; z-index:99;  }

​工作演示