title: Make Hover area bigger
body: <p>As it shows in this link
  <a href="http://wop.pt/Temp/" rel="nofollow">http://wop.pt/Temp/</a></p>
  
  <p>I've made an image which when it's Hover, a Zoom In is made and a "Tooltip" shows up, with the Text "Look inside".</p>
  
  <p>But I wanted that the image doesn't Zoom Out when the user does Hover to the tooltip.</p>
  
  <p>Basically what I think I need is that the Hover incorporates the Tooltip.</p>
  
  <p>How can I enlarge the Area of the trigger without changing the Image?</p>
  
  <pre><code>   &lt;div class="img"&gt;&lt;a id="idCoverSchools" href="#"&gt;&lt;img width="150" height="130" src="Images/Covers-Schools.png" alt="Interview" /&gt;&lt;/a&gt;
              &lt;span class="clTooltip"&gt;Look inside&lt;/span&gt;
     &lt;/div&gt;
  
  
  .clTooltip{
      position:block;
      color:#FFF;
      display: none;
      background: #EB3431;
      margin-top:-45px;
      margin-left:13px;
      z-index: 100;
      width:100px;
      height:16px;
      padding:3px;
      text-align:center;}
  .img {
    margin-left:-99px;
    position:inherit;
    z-index: 0;}
  
  $(document).ready(function() {
      var cont_left = $("#idCovers").position().left;
      $("a img").hover(function() {
          // hover in
          $(this).parent().parent().css("z-index", 1);
          $(this).css("box-shadow", "5px 7px 5px #666");
          $(this).animate({
             height: "217",
             width: "250",
             left: "-=50",
             top: "-=50"
          }, "slow");
      }, function() {
          // hover out
          $(this).parent().parent().css("z-index", 0);
          $(this).css("box-shadow", "0px 0px 0px #CCCCCC");
          $(this).animate({
              height: "130",
              width: "150",
              left: "+=50",
             top: "+=50"
          }, "fast");
      });
  
      $(".img").each(function(index) {
          var left = (index * 200) + cont_left;
          $(this).css("left", left + "px");
      });
  });
  </code></pre>