CSS转换行为不正确

当鼠标悬停在图像上时，我不知道为什么图像会转换。另外，让我知道，如果有什么我可以移动或改变我的HTML或CSS的结构，使其更具功能，因为我是新的网络开发

html{
溢出：隐藏；
}
身体{
背景图像：url（“https://images.unsplash.com/photo-1617538781871-bfe89e84b61f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80“；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
保证金：0；
背景滤镜：模糊（32px）；
}
.image{
最小高度：500px；
边框样式：实心；
边框宽度：50px；
保证金：自动；
显示：块；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
高度：50vh；
盒影：0px 0px 20px#000000；
过渡：均为0.5s；
转换：翻译（-50%，-50%）；
}
.图片：悬停{
转换：标度（1.05）；
盒影：0px 0px 50px#000000；
}

这是因为
转换：translate（-50%，-50%）。在图像悬停时，您正在覆盖
transform
属性

您可能希望实现另一种将图像居中的方法，比如将其包装在容器或其他东西上，然后使用flexbox。下面是一个例子：


html{
溢出：隐藏；
}
身体{
背景图像：url（“https://images.unsplash.com/photo-1617538781871-bfe89e84b61f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80“；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
保证金：0；
背景滤镜：模糊（32px）；
}
.集装箱{
/*做这个改变*/
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.image{
最小高度：500px；
边框样式：实心；
边框宽度：50px；
保证金：自动；
显示：块；
保证金：0；
高度：50vh；
盒影：0px 0px 20px#000000；
过渡：均为0.5s；
}
.图片：悬停{
转换：标度（1.05）；
盒影：0px 0px 50px#000000；
}

transform:translate
被悬停时的
transform:scale
覆盖，但您可以在悬停定义中同时包含这两个部分。这回答了你的问题吗@姆伯格：别忘了投票和接受