image z-index at hover on a link

image z-index at hover on a link

Hi, I have the below code, I want to have some images that each image is on the other image whan hover on a link it's specific image zoom in and it's z-index becom the higher one. and the opacity of other images becom lower. I don't know how should i set z-index at js. my code is below:
  1.     <script type="text/javascript">
  2.         $(function () {
  3.             $('#left a').hover(function () {
  4.                 var indeX = $('#left a').index(this);
  5.                 $('#right img').eq(indeX).stop(true, false)
  6.     .animate({ width: '100px', height: '100px', opacity: 1 }, 500);
  7.             }, function () {
  8.                 $('#right img').stop(true, false)
  9.     .animate({ width: '50px', height: '50px', opacity: 0.5 }, 500);
  10.             });
  11.         })
  12.     </script>
the css
  1. <style type="text/css">
  2.     #left {
  3.  width:38%;
  4.  height:500px;
  5.  float:left;
  6.  border:1px solid blue;   
  7. }
  8. #right {
  9.  width:60%;
  10.  height:500px;
  11.  float:right;
  12.  border:1px solid red;   
  13. }
  14. #right img {
  15.  width:50px;
  16.  height:50px;
  17.  opacity: 0.5;   
  18. }
  19. </style>
the html:
  1.  <div id="left">
  2.       <a href="#">imge1</a>
  3.       <a href="#">imge2</a>
  4.       <a href="#">imge3</a>
  5.       <a href="#">imge4</a>
  6. </div>
  7. <div id="right">
  8.         <img src="1.jpg"style="z-index:200;"/>
  9.         <img src="2.jpg" style="z-index:190; position:relative; left:-40px;" />
  10.         <img src="3.jpg"style="z-index:180; position:relative; left:-80px;" />
  11.         <img src="4.jpg"style="z-index:170;position:relative; left:-100px;" />
  12. </div>