Intentando ocultar todo lo que está fuera de un div móvil

Question

Escribí un plugin de zoom hover y estoy tratando de encontrar la forma de oscurecer todo fuera del cuadro de zoom y hacer que el cuadro de zoom sea transparente, pero estoy teniendo un momento difícil tratando de descubrir lo que tengo que hacer para ello. ¿Uso opacidad? ¿Utilizo una imagen de fondo?

Ahora mismo está mostrando una opacidad blanca de .5 encima de una opacidad negra más oscura bg, pero me estoy rascando la cabeza tratando de resolver esto. Cualquier sugerencia sería muy útil.

Lo que estoy tratando de hacer:

Demostración: jsfiddle

Answer 1

He aquí un ejemplo de una solución, pero requiere que hacer un par de cambios.

Si establece el zoom cuadrado para tener una imagen de fondo igual a la imagen subyacente y ajusta su posición de fondo en css para ser el negativo de su posición relativa a la imagen original ... ¿lo estoy explicando correctamente?

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

La parte importante es

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

Y he configurado el fondo del elemento de zoom en el CSS para el violín, pero si usted necesita para hacer esto por varias imágenes que podrían hazlo en JS simplemente copiando el atributo src.