Overlay multiple magnified images with overflow using 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;
 }

The code is above.

Not too sure why it's not working. I am looking to place these four images on top of one another, magnifying some of them with overlfow, and then use jquery to fade them in and out; but for some reason, this isn't working. If I fiddle around with it enough, I can stretch it out with overflow only vertically and not horizontally, but I don't want this.

Edit: I did what brouxhaha said, and when I do this the width of the image if fine, but the height is 0.

Edit 2: http://jsfiddle.net/ZUp35/