Html 悬停时文本移动

我有一个

和一个

此处文本

我已将您在初始修订版中的代码一字不差地放入可运行的代码段中。然而，我没有看到你所描述的问题。您能否编辑您的问题并更新代码片段以再现问题或更详细地解释您面临的问题？

.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;
}