Question

I have the following code:

http://jsfiddle.net/G8Ste/577/

But I would like the effect to go in all directions, instead of just to the right and bottom.

I already tried margin: 0, auto and other css and html styling, to align it to the center, but it doesn’t work.

Thanks

Answer 1

The following jsFiddle will center one box inside of another and when being resized it will stayed centered within the parent container. I think this is the effect you are trying to achieve. I am using negative margins to keep the inner box centered. For whatever height/width you are using, just set the margin to half of the width/height.

http://jsfiddle.net/G8Ste/594/

EDIT:

I updated the above jsFiddle to handle relative sizing. There are 2 variables inside the mousedown function that determine the scale of the box. scaleDown is a percentage of the original size you want to scale down to on mouseDown and scale up is a percentage of the original size you want to scale up to on mouseUp. This should work for any sized box since all the values are calculated instead of hard coded.

http://jsfiddle.net/G8Ste/600/

EDIT2:

The code now checks if the box is being animated when clicked multiple times quickly. The code will wait until the previous animation is complete before animating again.

http://jsfiddle.net/G8Ste/601/

EDIT3:

http://jsfiddle.net/G8Ste/613/

Updated yet again to make it more responsive. I converted the code to a plugin called centeringEffect.

Usage

$(‘IMAGES’).centeringEffect();

Options

scaleDown: The percentage you want the image to scale down to on mouseDown (Default: .6)
scaleUp: The percentage you want the image to scale up to on mouseUp (Default: .6)