Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

183
Vistas
Adding zoom on hover function to all elements of a class

I want to add the hover zoom effect to all images that pertain to the class "img-container".

To achieve this goal, I am using this code:

var container = document.getElementsByClassName('img-container');
    console.log(container.length);

            window.addEventListener("load", function(){
            for(var i = 0; i < container.length; i++){
                var current_img = container[i];
                var imgsrc = current_img.currentStyle || window.getComputedStyle(current_img, false),
                    imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, ""),
                    img = new Image();

                    img.src = imgsrc;
                img.onload = function(){
                    var imgWidth = img.naturalWidth,
                        imgHeight = img.naturalHeight,
                        ratio = imgHeight/imgWidth,
                        percentage = ratio * 100 + "%";

                        current_img.onmousemove = function(e){
                            var boxWidth = current_img.clientWidth,
                            xPos = e.pageX - this.offsetLeft,
                            yPos = e.pageY - this.offsetTop,    
                            xPercent = xPos / (boxWidth / 100) + "%",
                            yPercent = yPos / (boxWidth * ratio / 100) + "%";

                            Object.assign(current_img.style, {
                                backgroundPosition: xPercent + " " + yPercent,
                                backgroundSize: imgWidth + "px"
                            });                     
                        };
                    };


                    current_img.onmouseleave = function(e){
                        Object.assign(current_img.style, {
                            backgroundPosition: "center",
                            backgroundSize: "cover"
                        }); 
                    };
                };
            });

This, however is not working, and I fail to see the logical error that I performed. This code works fine when I use getElementById instead of class, but using that would require me to repeat the code many times, which is unfeasible.

about 4 years ago · Santiago Trujillo
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda