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

something like this: /

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?

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

something like this: http://www.sohtanaka./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?

• javascript
• jquery
• animation
• css
• jquery-effects

Share Improve this question Follow edited Apr 5, 2011 at 20:04 Alex asked Apr 5, 2011 at 4:13 AlexAlex 66.2k185185 gold badges460460 silver badges651651 bronze badges 4

• Even if it's a background, it's still an image, so still at the mercy of the browser's ability to resize images. – DA. Commented Apr 5, 2011 at 4:16
• then maybe somehow give the visitor the impression of zoom? like a visual illusion? :) – Alex Commented Apr 5, 2011 at 4:19
• I may have misunderstood you. Are you saying the image would remain the same dimensions, but you'd increase the size of the element that's containing it? (so the image wouldn't change size, but you'd see more of it because it's container is larger.) If so you could certainly do that. – DA. Commented Apr 5, 2011 at 4:25
• Do you mean like a magnifying glass? css-tricks./examples/AnythingZoomer – Mottie Commented Apr 5, 2011 at 4:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

CSS

#div{
    background: url('http://images.epilogue/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?

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/vm4wQ/