javascript - 如何让叠加层定位在图像上？

Question

这个问题已经有答案了:

How to overlay images (10 个回答)

已关闭 3 年前。

我正在以网格格式制作文档，当我将鼠标悬停在图像上时，我想要一个覆盖层，它会随机出现在它的下面。我如何将这种效果放在文档的更高位置？ (目前唯一具有此效果的图像中的第一张图像)。由于某种原因，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

Answer 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);到它的初始值，就是这样 😉

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