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.