砌体js网格中其他图像顶部的绝对位置图像

Question

为了创建图库，我使用的是砌体js网格（https://masonry.desandro.com/）。现在我需要在每个图像的顶部放置一个图标（在稍后的体育场中，这将是悬停的）。但是砌体js将此图标视为任何其他图像，并将其放置在其他图像旁边的网格中，而不是图像顶部。如何让图标（.eye）位于网格中每个图像（.image）的顶部？

$(document).ready(function() {
  // init Masonry
  var $grid = $('.grid').masonry({
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
  // layout Masonry after each image loads
  $grid.imagesLoaded().progress(function() {
    $grid.masonry('layout');
  });
});

.grid-sizer,
.grid-item {
  width: 20%;
  position: relative;
}

.griditem .eye {
  position: absolute;
  width: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.grid-item .image {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width2">
    <img class="image" src="img/1.jpg" alt="" />
    <img class="eye" src="img/eye.png" alt="" />
  </div>
  <div class="grid-item">
    <img class="image" src="img/2.jpg" alt="" />
    <img class="eye" src="img/eye.png" alt="" />
  </div>
  <div class="grid-item">
    <img class="image" src="img/3.jpg" alt="" />
    <img class="eye" src="img/eye.png" alt="" />
  </div>
</div>