Javascript: Acercar mouseover SIN Jquery o complementos

He buscado esto en todas partes durante semanas, y simplemente no puedo encontrar algo que me diga lo que estoy haciendo mal o cómo proceder. El objective es crear una función similar a la ampliación de Amazon en mouseover para productos con imágenes pequeñas.

Actualmente no sé cómo proceder, aunque sé que necesitaré dos imágenes: una en el tamaño “ampliado” y otra en el tamaño “reducido”. No estoy usando Jquery : no puedo instalarlo o cualquier complemento en el sitio web a través de la solicitud de mi empleador. Básicamente estoy pidiendo la respuesta más difícil, y me disculpo por eso de antemano. Debo hacer esto desde cero moderado. Advertencia : soy un estudiante de progtwigción. Toma eso como quieras.

Tengo un script de HTML y CSS, y como en realidad no tenemos un IDE aquí, estoy haciendo esto en la sección de proyecto de codecademy, de lo contrario tendría que progtwigrlo completamente en vivo. Puedes encontrar mi código aquí , pero también publicaré el código a continuación, ya que ese enlace tiene que cambiar el código ya que usa el ahorro de procedimientos.

Nota: Originalmente lo tenía para que la caja gris siguiera mi mouse en el centro relativo. Estaba parpadeando mientras se movía, pero estaba funcionando. Actualmente, se decidió no hacerlo, al menos en mi computadora de trabajo. No lo he probado en mi computadora personal.

Editar: El código está trabajando en mi Surface Pro 3, aunque sigue el mouse fuera de la imagen (que es temporal y algo aleatorio que agarré). No estoy seguro de por qué el código no funciona en mi computadora de trabajo, aunque es probable porque es una versión 10.6.8 de Macintosh OSX …

Código HTML :

        

Código CSS :

 #imgZoom { height: 300; } #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:20%; height:20%; padding: 25px; border: 5px solid gray; background-color: white; opacity:0.4; text-align:center; z-index: 1000; } 

Código Javascript :

 function zoomIn() { var element = document.getElementById("overlay"); element.style.visibility = "visible"; var x = event.clientX; // Get the horizontal coordinate var y = event.clientY; // Get the vertical coordinate element.style.top = y - 80; element.style.left = x - 80; } function zoomOut() { var element = document.getElementById("overlay"); element.style.visibility = "hidden"; } 

Solutions Collecting From Web of "Javascript: Acercar mouseover SIN Jquery o complementos"

solo puede hacerlo jugando en posición de fondo al pasar el mouse simplemente moviendo la posición de fondo en la DEMO de mouseover

 function zoomIn(event) { var element = document.getElementById("overlay"); element.style.display = "inline-block"; var img = document.getElementById("imgZoom"); var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px"; } function zoomOut() { var element = document.getElementById("overlay"); element.style.display = "none"; } 
 #overlay { border: 1px solid black; width: 200px; height: 200px; display: inline-block; background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg'); background-repeat: no-repeat; } 
  

Esto funciona para mí: (Aquí hay un JSFiddle )

 #imgZoom { height: 300; } img#imgZoom:hover { position: relative; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); z-index: 1000; } 

También puede agregar esto para un efecto de transición interesante:

 * { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } 

* Además, puede aplicar la misma lógica no solo para imágenes, sino también para divs.

 function zoomIn(event) { var element = document.getElementById("overlay"); element.style.display = "inline-block"; var img = document.getElementById("imgZoom"); var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px"; } function zoomOut() { var element = document.getElementById("overlay"); element.style.display = "none"; } 
 #overlay { border: 1px solid black; width: 100px; height: 100px; display: inline-block; background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg'); background-repeat: no-repeat; }