html - 如何使用伪元素移动图像？

Question

我试图让图像移动起来，就像它在页面上悬停了一点，使其比鼠标悬停在其上时的当前位置高一点。

它应该进入我现在粘贴 .thumbnailhover 的位置。我可能没有足够正确地应用 ::after，但我似乎无法弄清楚该怎么做。图像 + thumbnailfade 应该在同一个位置。

.thumbnail {
  position: relative;
  background-color: red;
  height: 332px;
  width: 450px;
}

.thumbnail::after {
  transform: translate(0px);
}

.thumbnailfade {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  height: 332px;
  width: 450px;
  opacity: 0;
  color: white;
  font-size: 3em;
  transition: 0.4s;
}

.thumbnail:hover .thumbnailfade {
  opacity: 1;
  transform: translate(10px, -10px);
}

.thumbnail::after:hover {
  transform: translate(10px, -10px);
}

<div class="thumbnail">
  <div class="thumbnailfade">
    Oh my god!
  </div>
</div>

Example

Answer 1

我不确定我是否理解您的要求。但这是你想要的吗:

.thumbnail {
    position: relative;
    background-color: red;
    height: 332px;
    width: 450px;
}

.thumbnail::after{
    transform: translate(0px);
}

.thumbnailfade {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    height: 332px;
    width: 450px;
    opacity: 0;
    color: white;
    font-size: 3em;
    transition: 0.4s;
}

.thumbnail:hover .thumbnailfade{
    opacity: 1;
}

.thumbnail:hover {
    position: relative;
    transform: translate(10px, -10px);
}

<div class="thumbnail"> 
    <div class="thumbnailfade">
        Oh my god!
    </div>
</div>