jQuery “enlarge on hover” fails to enlarge relative to center of picture

Question

I got some great help on getting the basic part of this down, but now I need help again :( The javascript below is supposed to make it so that when you hover over thumbnails in a gallery, the thumbnails enlarge. I increase the height and width, but I also change the top and left offsets to compensate so that it looks like the picture is enlarging relative to the center of the thumbnail, instead of stretching out towards the bottom-right.

    jQuery('.videogall-thumb').hover(function() {
    var currThumb = jQuery(this).attr('id');
    jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({height: "100", width: "118", left: "-12", top: "-15"}, "fast");
}, function() {
    jQuery('.videogall-thumb').stop().animate({height: "83", width: "98", left: "0", top: "0"}, "fast");
}
);

At least that's what I hoped would happen. But the thumbnails are still stretching out instead of enlarging from the center. Additionally, the thumbnail that is being enlarged ends up underneath neighboring thumbnails on the row instead of going on top of them, and it pushes the neighboring thumbnails on the row below. See what I mean here: http://oneworldyouthproject.org/tubepress-test/

What am I missing?

Answer 1

您需要设置position: relative你的img为了使元素left和top的定位工作。