image zoom at hover on a text

image zoom at hover on a text

Hello,
I have a web application, I have some <a> tags (at a div at left of page), and some images that each tag has it's specified image. (images are at a div at the right of page). when I mouse over on each tag I want the specific image to zoom and other image's opacity become lower.
HTML code:
  1.  <div id="right" style="width:40%; height:500px; float:left;">
  2.         <a href="#">imge1</a>
  3.       <a href="#">imge2</a>
  4.         <a href="#">imge3</a>
  5.        <a href="#">imge4</a>
  6.        
  7.         </div>
  8.         <div id="left" style="width:60%; height:500px; float:right;">
  9.         <img class="img" src="1.jpg""/>
  10.         <img class="img" src="2.jpg" />
  11.         <img class="img" src="3.jpg" />
  12.         <img class="img" src="4.jpg" />
  13.        
  14.         </div>
I don't know how can I do that, I used the below js code but it doesn't work. I'm not familier with js. but need this code, please help.
  1.  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(document).ready(function () {
  4.             var cont_left = $("#container").position().left;
  5.             $("a").hover(function () {
  6.                 // hover in
  7.                 $(img).parent().parent().css("z-index", 1);
  8.                 $(img).animate({
  9.                     height: "250",
  10.                     width: "250",
  11.                     left: "-=50",
  12.                     top: "-=50"
  13.                 }, "fast");
  14.             }, function () {
  15.                 // hover out
  16.                 $(img).parent().parent().css("z-index", 0);
  17.                 $(img).animate({
  18.                     height: "150",
  19.                     width: "150",
  20.                     left: "+=50",
  21.                     top: "+=50"
  22.                 }, "fast");
  23.             });
  24.             $(".img").each(function (index) {
  25.                 var left = (index * 160) + cont_left;
  26.                 $(img).css("left", left + "px");
  27.             });
  28.         });
  29.         $(function () {
  30.             $('.img').each(function () {
  31.                 $(this).hover(
  32.                     function () {
  33.                         $(this).stop().animate({ opacity: 1.0 }, 800);
  34.                     },
  35.                    function () {
  36.                        $(this).stop().animate({ opacity: 0.3 }, 800);
  37.                    })
  38.             });
  39.         });
  40.     </script>