如何在图片上叠加显示位置？ [重复]

Question

此问题已经在这里有了答案：

How to overlay images（11个答案）

[29天前关闭。

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

.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);重置为其初始值即可，😉

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