画像のオーバーマウス時のマスクがずれます。

前提・実現したいこと

インスタグラムのように画像を正方形に並べて、
画像のオーバーマウスで薄く暗くした上に文字が出て、クリックするとポップアップするような感じにしたいです。（オーバーマウス時のマスクのズレを直したいです）

object-fit: cover;　で画像のトリミングをしてから、オーバーマウス時のマスクがずれるようになりました。（三段目はずれませんが、二段目、一段目はマスク部分の上が少しはみ出ます。）

発生している問題・エラーメッセージ

画像のオーバーマウス時、薄く暗くなって、説明文字が出るマスクがどうしても正方形画像からずれてしまいます。
三段で九つの画像を並べていますが、三段目は綺麗になっているのですが、
二段目、一段目となるにつれ、ずれていってしまいます。原因が全く分かりません。

該当のソースコード

<!DOCTYPE html>
<html>
<p>
  </p>
<center><a href="#Illust"><img src="サイトURL/illust_button.png"></a> &ensp;  &ensp;  &ensp; <a href="#Comic"><img src="サイトURL/comic_button.png"></a></center>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<style>ul.over{ width:1000px;
    flex-wrap: wrap;
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.over li{ margin-bottom:0;
    position: relative;
    left: 30px;
    width: 30%;
}
.over img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    display: block;
    vertical-align: top;
}
.over div{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    opacity: 0;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    transition: .3s;
}
.over li:hover div{
    background: rgba(0,0,0,0.5);
    opacity: 1;
}
</style>
</head>
<body>
  <center><p style="text-align:center;"><span style="font-size: 14pt;"><strong><a id="Illust">Illust</a></strong></span></p>
 <ul class="over">
   <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像①</div></a>
   </li>
   <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像②</div></a>
   </li>
   <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像③</div></a>
   </li>
   <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像④</div></a>
   </li>
   <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像⑤</div></a>
    </li>
    <li>
　　<a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像⑥</div></a>
    </li>
    <li>
       <a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像⑦</div></a>
    </li>
    <li>
        <a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像⑧</div></a>
    </li>
   <li>
        <a href="画像URL" data-lightbox="group"><img src="画像URL">
        <div>画像⑨</div></a>
    </li>
  </ul>
  </center>
  </body>
  <body>
   <center><p style="text-align:center;"><span style="font-size: 14pt;"><strong><a id="Comic">Comic</a></strong></span>
   <ul class="over">
    <li>
        <a href="http://designfubou.jp/madamisu_sandoramike.png" data-lightbox="group"><img src="http://designfubou.jp/madamisu_sandoramike.png">
        <div>タイトル</div></a>
    </li>
   <li>
        <a href="http://designfubou.jp/madamisu_emanick.png" data-lightbox="group"><img src="http://designfubou.jp/madamisu_emanick.png">
        <div>タイトル</div></a>
    </li>
</ul>
  </center>
</body>
  <p>
  </p>
<center><a href="#"><img src="サイトURL/top_button.png"></a></center>
</html>

試したこと

widthを変更したり、hightを変更したり、いろいろ試しましたが、ダメでした。
別なページで同じようなつくりのページを作っていましたが、object-fit: cover;を加えても
width: 100%;、height 100%;にしてた時は特にずれはありませんでしたが、height 100%;だと画像が
縦長になってしまう為、height 300px;にしました。