Trying to cross out everything outside the rolling div

Question

I wrote a zoom scaling plugin, and I'm trying to figure out how to darken out everything outside the zoom window and make the zoom window transparent, but it's hard for me to spend time trying to figure out what I need for this. Use transparency? Use background image?

Now it just shows a white opacity .5 on top of the darker black opacity bg, but I kind of scratch my head, trying to figure it out. Any suggestions would be very helpful.

What am I trying to do:

Demo: jsfiddle

Answer 1

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

If you set the zoom square so that the background image is the same as the original image and adjust its background position on css as its negative position relative to the original image ... Am I explaining this correctly?

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

An important part

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 set the background of the zoom element in CSS for the violin, but if you need to do this for multiple images, you can do it in JS just by copying the src attribute.