什么在CSS中导致图像在悬停时跳转？

Question

它需要你快速地将鼠标移动到图像周围，但是你会注意到每隔一段时间就有一个很大的跳跃。我无法确定原因，我希望社区可能有一些见解。

以下是相关代码，示例可在the website.

上找到

.square {
    float: left;
    padding: 0;
    height: 250px;
    display: block;
    background: #000;
    overflow: hidden;
}

#main {
  margin: 0;
  padding: 0;

  ul {
    list-style: none;
    margin: 3% auto 10%;
    padding: 0;

    li {

      img {
        width: 100%;
        margin: -40% auto 0;
        transition: .2s;
      }

      img:hover {
        transform: scale(1.2);
      }
    }

    li:nth-child(3n+2) {

    }

    li:nth-child(3n) {

    }
  }
}

我怀疑图像边缘的-40％变化是罪魁祸首，但我无法确定跳跃为何如此不一致。