Question

I thought this ought to be a straightforward thing to do, but I don’t see a clear way to do it.

I would like to make it so that when a user hovers the mouse over an image, the image becomes 10% bigger and then returns to its original size when the user moves the mouse away.

I think that I will want to use the jQuery hover function, but I don’t know what functions to pass into hover.

$('.resizableImage').hover(makeBigger, returnToOriginalSize);

Answer 1

jQuery lets you use += and %. So those two together will do what you want.

$('.resizableImage').hover(makeBigger, returnToOriginalSize);

function makeBigger() {
    $(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
    $(this).css({height: "", width: ""});
}

DEMO: http://jsfiddle.net/rZaAE/