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?

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., Apr 05 '11 at 04:16
then maybe somehow give the visitor the impression of zoom? like a visual illusion? :) — Alex, Apr 05 '11 at 04: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., Apr 05 '11 at 04:25
Do you mean like a magnifying glass? http://css-tricks.com/examples/AnythingZoomer/ — Mottie, Apr 05 '11 at 04:40

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

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?

edited May 23 '17 at 12:11

Community

1
1

answered Apr 05 '11 at 04:47

S L

14,262
17
77
116

1

OP doesn't want zooming. Also this is not cross browser. – Pinkie Apr 05 '11 at 05:06
@Pinkie well i suppose `Can a zoom image like effect be reproduced with jQuery + background-position animation?` means zooming image as background rather than ``. And sure, its `CSS3` feature, no wonder, many browsers will not support it. – S L Apr 05 '11 at 05:11

score 1 · Answer 2 · answered Apr 05 '11 at 04:26

You mean like this

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

jQuery - zoom image effect (emulate browser resize)

2 Answers2

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