Html 如何将div元素与响应事件中的图像对齐？

我现在正在我的投资组合网站上工作。我的项目以可点击图像的形式列出，分为两列。我希望当用户将鼠标悬停在图像上时，会有一块实心的颜色块将其覆盖，并在中间显示项目标题。基本上是这样的：

当我使用行/列css类时，它工作得非常好，但由于我发现它的响应性不强（在移动设备上，第一列叠在另一列上，这很有意义，但这不是我想要的顺序），因此我将图像与浮点和填充对齐。现在，悬停效果/链接延伸到整个页面，而不是包含在图像区域中

以下是我的代码供参考：

CSS

HTML

项目名称

我怎样才能解决这个问题？我已尝试将display:block添加到.overlay类中。我已尝试使.overlay类与图像大小相同。我还尝试过围绕容器类包装链接，而不是像现在这样以其他方式包装。什么也没发生。我也尝试过调整容器大小，但这会缩小图像并将其堆叠成一列：（

阅读和

请尝试以下代码

注意：我稍微更改了HTML结构

.container{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.拇指{
位置：相对位置；
宽度：50%；
}
.拇指img{
宽度：100%；
}
.拇指：悬停。覆盖{
不透明度：1；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
不透明度：0；
身高：100%；
宽度：100%；
过渡：放松；
颜色：#000；
背景：#fff；
}
.overlay.text{
位置：绝对位置；
最高：50%；
转换：翻译（-50%）；
左：50%；
文本对齐：居中；
}

我真的不明白为什么，但它似乎没有将图像分成两列。当我添加两个以上的图像时，它们都会被涂抹在同一行上，而不是移到新的行上。此外，容器似乎比图像大一点，因为悬停延伸得更远？非常感谢使用

flex wrap:wrap

on

.container

类将大拇指包装到下一行。代码段已更新。但这会将它们全部放在一列中？我需要两列，因此每行两个项目定义

宽度：50%

on

.thumb

以确保容器每行可容纳2列。明白了！容器比图像稍大，但我已修复通过添加display:block-to.thumb-img来实现这一点。非常感谢您的帮助（和快速回复）：D

    .container {
        position: relative;
    }
   .image {
        display: block;
        height: auto;
   }
   .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        height: 100%;
        width: 100%;
       transition: .5s ease;
  }
  .container:hover .overlay {
       opacity: 1;
  }
  .text {
       color: white;
       font-size: 30px;
       font-family: "Lato-Bold";
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
   }
  @media screen and (min-width: 1025px) {
       .image {
           float: left;
           width: 45%;
           padding-left: 40px;
           padding-right: 15px;
           padding-bottom: 30px;
       }
  }           

     <div class = "container">
          <a href = "link"><img src="image name" class = "image"></a>
          <div class="overlay" style = "background-color: #color;">
               <div class="text">project title</div>
          </div>
     </div>