Expand / shrink div on hover / out with jQuery

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

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; }

thanks to @MarkPieszak. For dynamically created elements use

$(document).on({  mouseenter: function () {    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");  },  mouseleave: function () {    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");  }    }, '.img a img');

.hover() does work only on static elements. more here