Javascript 如何在图像上定位覆盖？

我正在制作一个网格格式的文档，当我将鼠标悬停在我想要有一个覆盖的图像上时，它会随机地放在它下面。我将如何在文档中提高这种效果。（唯一具有当前效果的图像中的第一个图像）。由于某些原因，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';
}

---

代码笔：

如果我理解正确，最简单的方法是使它相对于父对象是绝对的。在本例中，

.contained1

必须具有

位置：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);
}

因此，我的方法是使父
溢出：隐藏
，然后覆盖需要通过执行
transform:translate（100%，100%）使其不可见（实际上不需要同时在x轴和y轴上执行此操作）。然后，当用户悬停在上面时，您只需重置
transform:translate（0，0）到它的初始值，就是它如果我理解正确，最简单的方法是使它相对于父对象是绝对的。在本例中，
.contained1
必须具有
位置：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);
}

因此，我的方法是使父
溢出：隐藏
，然后覆盖需要通过执行
transform:translate（100%，100%）使其不可见（实际上不需要同时在x轴和y轴上执行此操作）。然后，当用户悬停在上面时，您只需重置
transform:translate（0，0）
到它的初始值，就是这样，codepen是空的，很抱歉，只是保存了它，所以它现在应该显示了。您只需要将z-index:1添加到覆盖中。Z索引优先于图层。数字越大，层次越高。overlay{z-index:1；}`代码笔对此是空的，只是保存了它，所以它现在应该显示出来了。您只需要将z-index:1添加到overlay中。Z索引优先于图层。数字越大，层次越高。overlay{z-index:1；}`谢谢，就是这样！谢谢，就是这样！