Question

I wrote a hover zoom plugin and I’m trying to figure out how to dark out everything outside of the hover zoom box, and make the zoom box itself transparent, but am having a tough time trying to figure out what I need to do for it. Do I use opacity? Do I use a background image?

Right now it’s just showing a white .5 opacity on top of a darker black opacity bg, but I’m kinda scratching my head trying to figure this out. Any suggestions would be super helpful.

What I’m trying to do:

Demo: jsfiddle

Answer 1

Here’s an example of a solution, but it requires you to make a couple of changes.

If you set the zoom square to have a background image the same as the underlying image and adjust its background-position by css to be the negative of its position relative to the original image… am I explaining this correctly?

http://jsfiddle.net/moopet/Be9AA/

The important part is

var left = Math.min(Math.max(relX - 100, 0), $origImg.width() - $zoomBox.width()),
    top = Math.min(Math.max(relY  - 100, 0), $origImg.height() - $zoomBox.height());

$zoomBox.css({
    left: left,
    top: top
});

$zoomBox.css({ backgroundPosition: (-left) + "px " + (-top) + "px" });

And I’ve set the background of the zoom element in the CSS for the fiddle, but if you needed to do this for multiple images you could do it in JS by just copying the src attribute.