html - 悬停时文本移动

Question

我有一个 <div>用 <img>元素在里面，文本在中间。当 <div>悬停在 上，图像的不透明度会发生变化。如果将鼠标悬停在图像上，文本将向左移动一个像素，然后再返回。

.mainimage {
  height: 100%;
  width: 100%;
  background: black;
}

.mainimageimg {
  opacity: 0.8;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.mainimageimg:hover {
  opacity: 1;
}

.mainimageheading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  user-select: none;
  font-size: 2.35em;
}

<div class="mainimage">
  <img class="mainimageimg" src="https://wallpaper-house.com/data/out/8/wallpaper2you_232687.jpg" draggable="false">
  <h1 class="mainimageheading">Text here</h1>
</div>

Answer 1

.mainimage {
    height: 100%;
    width: 100%;
    background: black;
}
.mainimageimg {
    opacity:0.8;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}
.mainimage:hover .mainimageimg {
    opacity: 1;
}
.mainimage:hover .mainimageheading{
   transform: translate(-50%, -50%);
}
.mainimageheading {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: white;
    user-select: none;
    font-size: 2.35em;
    transition: 1s all ease;
}