title: How to stop div from moving with on hover
body: <p>I want to increase the size of some images when hovering over them. 
  Please have a look at the example below. It's the option Test (3rd image):</p>
  
  <p><a href="http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html" rel="nofollow noreferrer">http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html</a></p>
  
  <pre class="lang-css prettyprint-override"><code>.swatches-container .swatch-img,
  .swatches-container .swatch-span {
    margin:0 2px 2px 0;
  }
  
  .swatches-container .swatch-img {
    border:1px solid #eee;
    max-width:30px;
    max-height:28px;
    z-index: 0;
    position: relative;
  }
  
  .swatches-container .swatch-img.current {
    border:2px solid #333;
  }
  
  .swatches-container .swatch-span {}
  
  .swatch-img:hover {
    border:1px solid #eee;
    max-width:60px;
    max-height:46px;
    left:10px;
    cursor:pointer;
    top: -20px;
    left: -20px;
  }
  </code></pre>
  
  <p>The problem I have is that when I hover over the third image, the div moves. How can I prevent this from happening?
  Thanks</p>