Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

182
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda