Jquery onmouseover image size increase

Question

I am trying to do an effect where when the mouse hovers over an image the it grows large by 50% of its size and goes back as soon as the mouse moves out of its region. Can it be possible to do this with jquery? how? could it be possible to do this without jquery? how hard would it be to do it without jquery?

Answer 1

Here you go:

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

Live demo: http://jsfiddle.net/simevidas/fwUMx/5/