使用MUI和CSS解决容器内图片hover变换时覆盖层间隙问题

为什么之前的调整无效？ #

你给&:hover::before加left: "-2rem"和width: "calc(100% + 2rem)"没生效的核心原因是：外层Box设置了overflow: hidden，伪元素属于该Box的宿主元素，超出Box边界的部分会被直接裁剪，所以看不到延伸效果。同时，图片右移后左侧露出的是Box的backgroundColor: black，和覆盖层颜色不一致，这就是视觉差异的来源。

最优解决方案 #

核心思路是分离裁剪范围与覆盖层的作用范围：把overflow: hidden从外层Box移到专门包裹图片的内层容器，让外层Box不再限制伪元素的显示范围，这样伪元素就能在hover时延伸覆盖图片右移露出的区域。

修改后的代码示例 #

<Link href={`/services/${link}`} style={{ display: "flex", width: "100%" }}>
  <Box
    sx={{
      borderRadius: "0 0 5rem 0",
      width: "100%",
      height: "100%",
      cursor: "pointer",
      position: "relative",
      backgroundColor: "black",
      "&::before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "96%",
        backgroundColor: "rgba(211, 211, 211, 0.5)",
        zIndex: 1,
        transition: "all 0.3s ease", // 改为all，让left/width的变化也有过渡
      },
      "&:hover::before": {
        backgroundColor: "rgba(144, 101, 186, 0.7)",
        left: "-2rem",
        width: "calc(100% + 2rem)",
      },
      "&:hover .image-container img": {
        transform: "translateX(2rem)",
      },
    }}
  >
    {/* 新增内层容器，专门负责裁剪图片 */}
    <Box className="image-container" sx={{ overflow: "hidden", width: "100%", height: "100%" }}>
      <Image
        src={imgSrc}
        alt="image"
        priority={false}
        sizes="100vw"
        style={{
          width: "100%",
          height: "100%",
          zIndex: 0,
          position: "relative",
          transition: "transform 0.3s ease",
        }}
        width={400}
        height={400}
      />
    </Box>
  </Box>
</Link>

关键调整点 #

1. 将overflow: hidden从外层Box移到内层的.image-container，只裁剪图片的溢出部分，不限制伪元素的显示。
2. 把伪元素的transition改为all 0.3s ease，让位置和宽度的变化也有平滑过渡，提升交互体验。
3. 保留你原本的伪元素hover变色、图片右移逻辑，确保功能一致性。

替代思路（可选） #

如果不想修改DOM结构，也可以通过给图片添加左侧内边距+背景色的方式模拟：hover时给图片加padding-left: 2rem，同时设置backgroundColor为覆盖层的颜色，但这种方式会让图片被压缩，视觉效果不如第一种方案自然。

内容的提问来源于stack exchange，提问作者codian