滚动后，有时悬停效果不起作用

Question

我正在尝试将本教程（悬停时的叠加图像标题）：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity整合到我的网站中。但是，当我这样做时，我发现在滚动后有时无法使用悬停效果。而是，将鼠标悬停在图像的某些部分上不会触发悬停效果。但是，如果我随机滚动一点，它将再次起作用（悬停适用于整个图像区域）。

有人知道为什么会发生这种情况吗？

编辑：我当前的实现如下：

<div class="col-md-3 right align-self-center" style="text-align: right;">
     <a href="file.pdf" target="_blank" class="container" style="width: 150px; height: 100px;">
          <img src="image.png" class="preview"> 
          <div class="caption">
               <p style="color:white">Caption</p>
          </div>
     </a>
</div>

a.container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

a.container:hover .preview {
  opacity: 0.3;
}

a.container:hover .caption {
  opacity: 1;
}

.preview {
  display: inline-block;
  opacity: 1;
  width: 100%; height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.caption {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}