如何让叠加层定位在图像上？ [复制]答案

【问题标题】：How to get overlay to position on an image? [duplicate]如何让叠加层定位在图像上？ [复制]
【发布时间】：2020-02-18 19:01:11
【问题描述】：

我正在制作一个网格格式的文档，当我将鼠标悬停在想要叠加的图像上时，它会随机出现在其下方。我将如何在文档中提高这种效果。（目前唯一有效果的第一张图片）。由于某种原因，HTML 不会显示在此处的代码块中，所以我附上了我的 codepen，谢谢大家！

.flex {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0% 5% 5% 5%;
}
.resize {
  max-width: 100%;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: cyan;
  overflow: hidden;
  width: 28%;
  height: 0;
  transition: .5s ease;
  opacity: 0.3;
   margin: 0% 0% 0% 5%;
}

.contained1:hover .overlay {
  height: 35%;
  width: 28%;
  margin: 0% 0% 0% 5%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'karla';
}

代码笔：https://codepen.io/daniel-albano/pen/vYOKRzp?editors=1100

【问题讨论】：

codepen 是空的
抱歉，刚刚保存，现在应该可以显示了
您只需将 z-index: 1 添加到叠加层。 Z-index 优先考虑图层。数字越大 - 层越高。 ` .overlay { z-index: 1; } `

标签： javascript html css overlay css-grid

【解决方案1】：

如果我理解正确，最简单的方法是使其绝对相对于父级。在此示例中，.contained1 必须具有 postion: relative; 并使其在不悬停时不可见。

.contained1 {
  position: relative;
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #2a7de1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0.7;
  transform: translate(100%, 100%);
}

.contained1:hover .overlay {
  transform: translate(0, 0);
}

所以我这样做的方法是让父 overflow: hidden 然后覆盖需要到外面通过做 transform: translate(100%, 100%); 使其不可见（你真的不需要同时在 x 和 y 轴上做）。然后，当用户将鼠标悬停在它上面时，您只需将 transform: translate(0, 0); 重置为其初始值，就是这样?

我希望我已经解决了你的问题❤

【讨论】：

谢谢，就是这样！