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

Increasing the width and height of the image , changes the position of the image (ie) it is enlarged but not in the same position where the original image was present.

Using Scaling property will address this issue.

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

Fiddle link : http://jsfiddle.net/RC7kb/178/