Expand / shrink div on hover / out with jQuery

Question

I am looking for a jQuery plugin to expand div elements so as to reveal their overflow (if any) on hover. Illustration:

The plugin should work on relatively positioned div's (which I guess implies that you create a copy of the div, set its positioning to absolute, then figure out where to place it).

Is there such a plugin already available out there?

Answer 1

You don't need a plugin. Just add proper css and use jQuery animate:

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})​

demo here

Answer 2

The images are missing here... but here is how I pulled this off a few years ago. The basic theory is that all of the images/div's whatever are absolute, inside of their own relative area. I then animate the left & top position both -negatively. This makes them protrude above the surrounding boxes and look like they are popping out. (Of course you also need to make sure the z-index of this one is higher than the ones around it).

jsFiddle DEMO

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);

    // this is where the popping out effect happens
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");

}, function() {
    $(this).closest(".img").css("z-index", 0);
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});​

The styles I have for these two things are:

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   background:#f1f1f1; 
   width:90px; 
   height:90px; 
}