使用CSS叠加多个放大的图像

Question

<div class="row">
 <div class="span12">
  <div id="animation">
   <div id="stage-1">
    <img id="product-image-1" src="site device stage IV.jpg"> 
    <img id="product-image-2" src="site device stage IV.jpg">
    <img id="product-image-3" src="site device stage IV.jpg">
    <img id="product-image-4" src="site device stage IV.jpg">
   </div>
  </div>
 </div>
</div>

#product-image-1 {
 height: 500%;
 width: 500%;
   position: relative;
   margin: auto;
   left: -1200px;
   top: -700px;
   overflow: hidden;
   visibility: visible;
}

 #stage-1 {
   position: absolute;
   margin: auto;
   overflow: hidden;
   height: 100%;
   width: 100%;
   visibility: visible;
 }

 #product-image-2 {
   height: 500%;
   width: 500%;
   position: relative;
   margin: auto;
   overflow: hidden;
 }


 #product-image-3 {
   height: 500%;
   width: 500%;
   position: relative;
   margin: auto;
   overflow: hidden;
 }

 #product-image-4 {
   height: 500%;
   width: 500%;
   position: relative;
   margin: auto;
   overflow: hidden;
 }

代码在上面。

不太清楚为什么它不起作用。我希望将这四个图像放在另一个上面，用overlfow放大它们中的一些，然后使用jquery来淡入淡出它们;但由于某种原因，这是行不通的。如果我用它来摆弄它，我可以只用垂直而不是水平的方式将它拉出来，但我不希望这样。

编辑：我做了brouxhaha所说的，当我这样做时，图像的宽度如果很好，但高度为0。

修改2： http://jsfiddle.net/ZUp35/