Is there a jQuery plugin for resizing tiles on hover that are confined within a box?

Question

I'm trying to make a gallery sort of thing, but with only 3 tiles - one big, and two smaller (of the same size) - when you hover over one of the tiles, I want it to expand as shown on the attached image, so that it becomes bigger and the other two a bit smaller. I remember I've seen this somewhere but was unable to find it. Can anyone help?

Maybe there is a ready plugin for that, or anyone has an idea how to do it.

Thanks!!

http://i.stack.imgur.com/iHxWG.png

Answer 1

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...)