如何在响应式事件中将 div 元素对齐到图像上？

Question

我现在正在制作我的投资组合网站。我的项目被列为可点击的图像，分为两列。我希望当用户将鼠标悬停在图像上时，一个纯色块覆盖它，并在中心显示项目标题。基本上是这样的：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.

当我使用 row/column css classes 时，它工作得很好，但是因为我发现它不是很敏感（在移动设备上，第一列得到堆叠在另一个之上，这是有道理的，但这不是我想要的顺序），我用浮动和填充来对齐图像。现在，悬停 effect/link 延伸到整个页面，而不是包含在图像区域中。

这是我的代码供参考：

CSS

    .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;
       }
  }

HTML

     <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>

我该如何解决这个问题？我试过将 display: block 添加到 .overlay class。我试过使 .overlay class 与图像大小相同。我也试过将 link 包裹在容器 class 周围，而不是像现在这样反过来。什么都没有发生。我也试过调整容器大小，但缩小了图像并将它们堆叠成 1 列:(

Answer 1

了解 Responsive Images and Flexbox

试试下面的代码。

注意：我稍微改变了HTML结构。

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.thumb {
  position: relative;
  width: 50%;
}

.thumb img {
  width: 100%;
}

.thumb:hover .overlay {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  color: #000;
  background: #fff;
}

.overlay .text {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  left: 50%;
  text-align: center;
}

<div class="container">
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
</div>

如何在响应式事件中将 div 元素对齐到图像上？

How do I align a div element onto an image in a responsive matter?

html

css

responsive