How to make an image x% bigger in JavaScript (with jQuery)

javascript, jquery

Solution

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/

Problem

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); ```

Original source