При наведении фонового изображения разверните

Question

У меня есть изображение, наложенное на другое изображение, и я хотел бы, чтобы заднее изображение расширялось при наведении. Дело в том, что я не могу сделать, чтобы изображение позади (фоновое изображение) расширялось равномерно. он вырастает вправо и вверх.

$(".wooll").hover(function() {
    $(this).animate({
        'height': $(this).height() * 1.8,
        'width' : $(this).width() * 1.8
    });
},function() {
   $(this).animate({
        'height': $(this).height() / 1.8,
        'width' : $(this).width() / 1.8
    });
});

Как мне расположить его в родительском элементе div, чтобы он расширялся равномерно?

<div id="woolley-expand">

<img class="wooll" style="text-align: center; position: absolute; bottom: 0px;" src="/images/component-bottle-big.png" width="60" height="117" />
<img src="/images/free-spray-text.png" style="position: absolute; bottom: 0; left: 0;"/>
</div>

#woolley-expand {
position: relative;
width: 200px;
height: 300px;
}