JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<div class="box">
    <div class="image">
        <img src="http://curious.astro.cornell.edu/images/xraysun.gif" alt="" />
    </div>
</div>

CSS

.box {
    -moz-border-radius: 5px 5px 5px 5px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E4E4E4;
    float: left;
    height: 145px;
    margin: 5px;
    overflow: hidden;
    text-align: center;
    width: 100px;
}

.box .image {
    height: 70px;
    margin: 10px;    
}

.box .image img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}

JavaScript

$('.box').live('hover', function()
{
    if($(this).height() == 145 && $(this).width() == 100)
    {
        $(this).animate({ height: '+=30px', width: '+=30px' }, 500)
        $('.image img').animate({ height: '+=30px', width: '+=30px' }, 500);
    }
    else
    {
        $(this).animate({ height: '-=30px', width: '-=30px' }, 500)
        $(this).next().find('.image img').animate({ height: '-=30px', width: '-=30px' }, 500);
    }
});