How to adjust masonry on box expand with jquery hover
===

I have a wall of boxes using jquery masonry each containing an image. I hide the information about each image and want to expand each box vertically using jquery on hover. My problem is it doesnt adjust the masonry so the expanded region hides behind other boxes. Here's how what I have.

    .box {
        position:absolute;
	width:198px;
    }
    .box .rel {
        position:relative;
    }
    .box .thumb {
        position:relative;
    }

    <div class="box">
     <div class="rel">
      <div class="thumb"></div>
     </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

So just to make it expand I just use animate to expand .rel on hover.

    $(document).ready(function(){
	$('.box').hover(function(){
          $(this).find('.rel').animate({
           height: 300,
          }, 500, function() {
          });
          
      });
    });

So how can I make the masonry adjust on this event. The columns are all the same width so it would be a perfect world if I could just get the box underneath it to move down without adjusting the full scheme of the masonry columns. Any ideas?