JQuery shrink div from centre

Question

I have created some JQuery that will expand a div 'popup' on hover and then it will shrink it on mouse out. However, this effect seems to happen from the top left and I need it to happen from the centre. I have see similar topics on Stack Overflow and the solution seems to be in getting the correct 'top' and 'left' values in the JQuery and the CSS, however, despite my best of efforts I can't get this right.

Here is a JS Fiddle of what i've achieved so far to work with: http://jsfiddle.net/MaverickJohnosn/m7q3H/

Here is the code for anyone unable to access the JS Fiddle.
HTML

<div class="productborder">
    <p>Section Title</p>
<div class="popup"><a href="#"></a></div>
<div class="productimg"><a href="#"></a></div>
</div>

<div class="productborder">
    <p>Section Title</p>
<div class="popup"><a href="#"></a></div>
<div class="productimg"><a href="#"></a></div>
</div>

CSS:

.productimg{
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 0;
width: 135px;   
height: 147px;
outline: 1px solid green;
}

.popup{
margin-top: 25px;
margin-left: 120px;
outline: 1px red solid;
position: absolute;
float: left;
z-index: 1;
}

.productborder{
border: 2px dashed #ccc;
padding: 5px 10px;
width: 210px;
float:left;
margin: 5px 11px;
position: relative;
}

JQuery:

$(document).ready(function() {
  $('.productborder', this).hover(

    function() {
      $('.popup', this).stop(true, true);
      $('.popup', this).animate({
          width: '100px',
          height: '100px',
          top: '25px',
          left: '55px'
      }, 500);
    }, function() {
      $('.popup', this).animate({
          width: '0px',
          height: '0px',
          top: '0px',
          left: '0px'
      }, 500);
  });

});

Answer 1

Set the left/top to the correct 'center' position before animating open, i.e.

$(document).ready(function() {
    $('.productborder', this).hover(

    function() {
        $('.popup', this).stop(true, true);
        $('.popup', this).css({
            left: '110px',
            top: '75px'
        });
        $('.popup', this).animate({
            width: '100px',
            height: '100px',
            top: '25px',
            left: '55px'
        }, 500);
    }, function() {
        $('.popup', this).animate({
            width: '0px',
            height: '0px',
            top: '110px',
            left: '75px'
        }, 500);
    });

});​