Cercando di oscurare tutto all'esterno di un div mobile

Question

Ho scritto un plug-in per il passaggio del mouse e sto cercando di capire come oscurare tutto al di fuori della casella di zoom al passaggio del mouse e rendere trasparente la casella di zoom, ma sto avendo un momento difficile cercando di capire cosa devo fare per questo. Uso l'opacità? Uso un'immagine di sfondo?

In questo momento mostra solo un'opacità di 0,5 bianco in cima a una opacità nera più scura bg, ma sto quasi graffiando la mia testa cercando di capirlo. Qualsiasi suggerimento sarebbe super utile.

Quello che sto cercando di fare:

Demo: jsfiddle

Answer 1

Ecco un esempio di una soluzione, ma richiede di fare un paio di modifiche.

Se si imposta il quadrato di zoom per avere un'immagine di sfondo uguale all'immagine sottostante e regolare la sua posizione di sfondo per css per essere il negativo della sua posizione rispetto all'immagine originale ... lo spiego correttamente?

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

La parte importante è

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" }); 

E ho impostato lo sfondo dell'elemento zoom nella CSS per il violino, ma se avete bisogno di fare questo per più immagini si potrebbe fallo in JS semplicemente copiando l'attributo src.