Maybe something like this: http://jsfiddle.net/7ALNj/ could be good start... you will have to tweak widths/heights to get desired effect, but it is pretty close, i would say...
$( ".tile-big" ).hover(
function() {
$( this ).stop().animate({width:"70%"});
$('.tile-small').stop().animate({width:"29%",height:'49%'});
}, function() {
$( this ).stop().animate({width:"60%"});
$('.tile-small').stop().animate({width:"39%"});
}
);
$( ".first" ).hover(
function() {
$( this ).stop().animate({width:"45%",height:"60%"});
$('.last').stop().animate({width:"45%",height:"39%"});
$('.tile-big').stop().animate({width:"54%"});
}, function() {
$( this ).stop().animate({width:"39%",height:'49%'});
$('.last').stop().animate({width:"39%",height:"49%"});
$('.tile-big').stop().animate({width:"60%"});
}
);
$( ".last" ).hover(
function() {
$( this ).stop().animate({width:"45%",height:"60%"});
$('.first').stop().animate({width:"45%",height:"39%"});
$('.tile-big').stop().animate({width:"54%"});
}, function() {
$( this ).stop().animate({width:"39%",height:'49%'});
$('.first').stop().animate({width:"39%",height:"49%"});
$('.tile-big').stop().animate({width:"60%"});
}
);
You can check html/css in fiddle (probably can be better, but this also works...)