html - 中央揃えの 2 つの画像を重ねて配置する際の空白の問題

Question

ある画像を別の画像の中央に配置しようとしていますが、上部の画像が上部/下部の中央に正確に配置されておらず、別の画像の高さが同じではないため、同じコードを 2 回使用すると、画像間に空白が表示されます。

ここにJSFiddleがあります

そしてコード：

HTML

<div class="container">
    <a href="" class="link">
        <span><img src="" class="topImage"></span>
        <img src=""/>   
    </a>
</div>

<div class="container">
    <a href="" class="link">
        <span><img src="" class="topImage"></span>
        <img src=""/>   
    </a>
</div>

CSS

.container {
   position: relative;
   width: 100%;
} 

 .container a span {
   display: none;
   width: 100%;
   height: 100%;
   margin: 0;
   background-color: rgba(34, 34, 34, 0.4);
   opacity: .95;
 }

.container a:hover span {
    position: absolute;
    display: block;
    vertical-align: top;
    margin: 0;
    left: 0;
  }

 .topImage {
    width: 25%;
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;
   }

  img {
      width: 100%;
  } 

画像を上部の中央に配置し、背景の画像間の空白を削除したいと考えています。

ありがとう。