jQuery - zoom image effect (emulate browser resize)

Question

Can a zoom image like effect be reproduced with jQuery + background-position animation?

something like this: http://www.sohtanaka.com/web-design/examples/image-zoom/

I mean, instead of animating image size (which sucks because browsers resize images horribly) - do a animation by setting a background image on a link, and animate the position and size of the link.

edit:

A idea is to use two images. For example:

• two overlapped images, one 200 x 200 pixels, the other 400 x 400 pixels
• only the 1st image is visible, the 2nd image is hidden behind the 1st, and resized to 200 x 200
• the user hovers over it, then the first image enlarges to 400 x 400 and fades out simultaneously
• the second image fades in and enlarged simultaneously to its original size (400 x 400)

Could this be achieved with jquery and how?

Answer 1

CSS

#div{
    background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
    background-size: 10%;
    height: 490px;
    width: 490px;
}

JS

$('#div').hover(function (){
    $(this).animate({
        'background-size': '50%'
    })
}, function (){
    $(this).animate({
        'background-size': '10%'
    })
})

HTML

 <div id="div"></div>

On JSFIDDLE

DESCRIPTION: works only on latest chrome

REFERENCE: Set size on background image with CSS?

Answer 2

You mean like this

$('div').hover(function() {
    $(this).animate({
        width: 400,
        height: 400
    })
}, function() {
    $(this).animate({
        width: 200,
        height: 200
    })
})

Check working example at http://jsfiddle.net/vm4wQ/