Resize from the area I click

Question

I'd like to know if it's possible to resize a content from the area I click instead of the top left default resize.

For example here is my code http://jsfiddle.net/2drYk/29/

var $cont = $('.container .content'),
    init_size = $cont.width()*0.1,
    ratio = $cont.width() / $cont.height(),
    c =0,
    s = [400,init_size];

$cont.height( init_size );

$cont.click(function(){   
    $(this).stop().animate({height: s[c%2], width: s[c%2] * ratio });
    c++;
});

as you can see it resize from top left to bottom right, Is it possible to set the point it start to resize depending on where I clic ?

Answer 1

Yes, as you resize, move the image in the proper ratio so that point in the larger image is the same relative point as was the location of the click event. Essentially this means moving it to negative top and left according to the ratio The calculation for image placement when clicking is:

New position = Mouse click event position-New size/Old Size*Mouse click event position 

Here's a jsfiddle example

This example makes use of of an equal width/height ratio, but you can easily build upon it to support whichever ratios you require