Enlarging images when mouseover using Jquery?

Question

I am trying to enlarge the images when mouseover and reduce the size back to normal after mouseout. I have the following:

$(\'#image img\').live(\"mouseover\         


        

Answer 1

Try this: http://jsfiddle.net/FPKAP/11/ or using hover: http://jsfiddle.net/FPKAP/12/

When you will hover over the HULK it will zoomin and on mouse out zoom out.

This should help the need, lemme know if I misunderstood anything please, :)

code

$('#zoomimg').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

$('#zoomimg').mouseleave(function() {   
    $(this).animate({width: "28%"}, 'slow');
});

code

$('#zoomimg').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).animate({
        width: "50%",
        height: "50%"
    }, 'slow');

}, function() {
    $(this).animate({
        width: "28%"
    }, 'slow');

});​