Question

I’m experimenting with the CSS zoom property, and I’m trying to basically zoom into an image while keeping it anchored at a certain point. So rather than zooming in while the point at 0,0 stays put, I’d like it to zoom from the bottom right corner instead.

So this is my attempt, but obviously it’s a little “quirky”:

Fiddle: http://jsfiddle.net/csaltyj/nJ2M8/

HTML:

<div id="overlay">
    <div class="square">
        <img src="http://placekitten.com/800/800" width="400" height="400" />
    </div>
</div>

Javascript:

$('.square img').on('click', function() {
    $('.square').animate({
        zoom: '200%',
        left: '-200px',
        top: '-200px'
    }, 200);
});

CSS:

#overlay {
    overflow: hidden;
    width: 400px;
    height: 400px;
}

.square {
    position: relative;
    width: 320px;
    height: 320px;
    background: #333;
    vertical-align: bottom;

    font-size: 2em;
    font-family: Impact, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
}

Any way to get this to behave as I’d like it to? I need the 400,400 corner to stay put as it zooms in.

Answer 1

If you want to zoom to the center of the image then change:

    left: '-200px',
    top: '-200px'

To:

    left: '-50%',
    top: '-50%'

Here is a demo: http://jsfiddle.net/nJ2M8/1/

Update

Try using transform, it’s capable of scaling an element. Here is some code I wrote a while ago to do just this:

$(function () {
    var venderTransform = ($.browser.webkit)  ? 'WebkitTransform' :
                      ($.browser.mozilla) ? 'MozTransform' : 
                      ($.browser.msie)    ? 'MsTransform' : 
                      ($.browser.opera)   ? 'OTransform' : 'transform'


    $('.square').each(function () {
        $.data(this, 'scale', 3);
    }).bind('mousewheel', function (event, delta) {
        event.preventDefault();
            
        var sc = $.data(this, 'scale');
        
        if ((delta == 1 && sc < 5) || (delta == -1 && sc > 1)) {
            sc += delta;
            $.data(this, 'scale', sc);
            $(this).children('img').css(venderTransform, 'scale(' + sc + ')');
        }
    }).bind('mousemove', function (event) {
        var sc = $.data(this, 'scale') || 1;//scale
        if (sc > 1) {
            var $this = $(this),
                X  = (typeof(event.offsetX) == 'undefined') ? (event.pageX - $this.offset().left) : (event.offsetX),//current cursor X position in bullet element
                Y  = (typeof(event.offsetY) == 'undefined') ? (event.pageY - $this.offset().top) : (event.offsetY),//current cursor Y position in bullet element
                w  = 400,//width of thumbnail
                h  = 400,//height of a thumbnail
                nX = ((w / 2) - X),//new X
                nY = ((h / 2) - Y),//new Y
                tf = 'translate(' + (nX * (sc - 1)) + 'px, ' + (nY * (sc - 1)) + 'px) scale(' + sc + ')';//transform string
            $this.children('img').css(venderTransform, tf);
        }
    }).bind('mouseleave', function () {
        
        //reset .has-thumb element on mouseleave
        $.data(this, 'scale', 3);
        $(this).children('img').css(venderTransform, 'translate(0, 0) scale(1)');
    });
});

Here is a demo: http://jsfiddle.net/nJ2M8/2/ (the zoom follows your cursor and you can use your mouse-wheel to zoom in/out)