在Javascript中使用matrix（）进行放大

我试图在Javascript中使用矩阵方法来放大我的图像。这样做我面临两个问题：

在鼠标上方，我希望每个图像在正x轴和负y轴上拉长。

当我将鼠标移到第二个图像上时，它会拉长，然后当我将鼠标移到第一个图像上时，第二个图像会堆叠在第一个图像上

HTML代码

<div class="gallery">
  <a target="_blank" href="images/firefighter.jpg">
    <img id="fireFighter" src="#" alt="firefighter" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="images/work.jpg">
    <img id="work" src="#" alt="work" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

我们将不胜感激。谢谢

function onPageLoad(i) {
    var imageArray = [];
    imageArray[0] = "https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80";
    imageArray[1] = "https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80";
    // imageArray[2] = "https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80";
    // imageArray[3] = "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80";
    return imageArray[i];
}
var rollOver = (function () {
    //Image0
    var image0 = new Image();
    var img0 = document.getElementById("fireFighter");
    var loadImage0 = document.getElementById("fireFighter");
    
    image0.onload = function () {
        loadImage0.src = image0.src;
    };
    image0.src = onPageLoad(0);

    img0.addEventListener('mouseover', function () {
        img0.style.transform = "matrix(5 , 0, 0, 5, 350,350)";
        img0.style.transition = "transform 1s";
        img0.style.zIndex = "1";

    });
    img0.addEventListener('mouseout', function () {
        img0.style.transform = "scale(1)";
        img0.style.transition = "transform 1s";
        img0.style.zIndex = "-1";

    });
    //Image1
    var image1 = new Image();
    var loadImage1 = document.getElementById("work");
    var img1 = document.getElementById("work");
    image1.onload = function () {
        loadImage1.src = image1.src;
    };
    image1.src = onPageLoad(1);

    img1.addEventListener('mouseover', function () {
        img1.style.transform = "matrix(5 , 0, 0, 5, 350,350)";
        img1.style.transition = "transform 1s";
        img1.style.zIndex = "1";

    });
    img1.addEventListener('mouseout', function () {
        img1.style.transform = "matrix(1 , 0, 0, 1, 0,0)";
        img1.style.transition = "transform 1s";
        image1.style.zIndex = "-1";
    });

    


}());

window.onload = rollOver;