[dmk]

Пытаюсь сделать портфолио с сеткой превьюшками, в которых при наведении мыши просматривается скриншот вёрстки.

Пример на странице (1-й блок) - http://dmink.link/ok

Если блок-ппевью один, работает такой код:

window.onload = addIndentPreview;
window.onresize = addIndentPreview;

var projectWrapper = document.querySelector(".js-preview-wrapper"),
    projectImg = document.querySelector(".js-preview-img"),
    wrapperHeight, imgHeight, imgMargin,
    i;

 function addIndentPreview() {
     wrapperHeight = projectWrapper.clientHeight;
     imgHeight = projectImg.clientHeight;
     imgMargin = -(imgHeight - wrapperHeight) + "px";

     projectWrapper.onmouseover = function () {
        projectImg.style.marginTop = imgMargin;
     };
     projectWrapper.onmouseout = function () {
        projectImg.style.marginTop = 0 + "px";
    };
 };

Дальше пытаюсь сделать рабочими все превьюшки, для этого добавляю цикл for в функцию. Но работает криво - при наведении мыши на 1-ю крутиться 3-я.

window.onload = addIndentPreview;
window.onresize = addIndentPreview;

var projectWrapper = document.querySelector(".js-preview-wrapper"),
    projectImg = document.querySelectorAll(".js-preview-img"),
    wrapperHeight, imgHeight, imgMargin,
    i, img;

function addIndentPreview() {
    wrapperHeight = projectWrapper.clientHeight;

    for (i = 0; i < projectImg.length; i++) {
        img = projectImg[i];
        imgHeight = img.clientHeight;
        imgMargin = -(imgHeight - wrapperHeight) + "px";

        projectWrapper.onmouseover = function () {
            img.style.marginTop = imgMargin;
        };
        projectWrapper.onmouseout = function () {
            img.style.marginTop = 0;
        };
    }
}

Страница с кривой работой - http://dmink.link/

В чём ошибка, что нужно поправить?