Quiero agregar el efecto de zoom flotante a todas las imágenes que pertenecen a la clase "img-container".

Para lograr este objetivo, estoy usando este código:

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

Sin embargo, esto no funciona y no veo el error lógico que realicé. Este código funciona bien cuando uso getElementById en lugar de class, pero usar eso me obligaría a repetir el código muchas veces, lo cual es inviable.