使用 MUI 和 CSS 转换容器中的图像时如何防止悬停叠加出现间隙？

Question

我正在使用 Material UI (MUI) 开发一项功能，其中容器内有一个图像，该图像在悬停时会向右移动。该容器还具有使用 ::before 伪元素应用的覆盖层。悬停效果按预期工作，但当图像移动时，它会在左侧留下一个与图像背景颜色不同的间隙。我认为答案是使父容器的背景颜色与图像的背景颜色相同，但我觉得我把事情变得过于复杂了。有没有更好的方法来完成我想要完成的任务？

代码（使用 NextJS、NextJS/Imag、NextJS/Link 和 MUI）：

  <Link href={`/services/${link}`} style={{ display: "flex", width: "100%" }}>
          <Box
            sx={{
              borderRadius: "0 0 5rem 0",
              overflow: "hidden",
              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: "background-color 0.3s ease",
              },
              "&:hover::before": {
                backgroundColor: "rgba(144, 101, 186, 0.7)",
              },
              "&:hover img": {
                transform: "translateX(2rem)",
              },
            }}
          >
            <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>
        </Link>

重申上面的内容：

问题： 当图像在悬停时向右移动时（变换：translateX(2rem)），先前被图像覆盖的左侧区域变得可见，但它的颜色与图像背景色+叠加颜色不同.

我尝试将其添加到 &:hover::before 标签中：

 left: "-2rem", 
 width: "calc(100% + 2rem)",

但这没有用。

有没有办法在悬停时动态扩展覆盖（编辑：这个问题的措辞错误——有没有办法在悬停时扩展图像背景颜色+覆盖颜色？即使这样也可能不是正确的措辞。）？我是否正确地处理了这个问题？我对 NextJS/React 还很陌生，而且从来都不是 CSS 专家。

如有任何帮助或建议，我们将不胜感激！

Answer 1

想通了。改变了叠加的工作方式。移动图像并向左叠加 2rem 开始。悬停变换可在悬停时将所有内容向右移动 2rem。

<Link href={`/services/{link}`} style={{ display: "flex", width: "100%", overflow: "hidden" }}>
          <Box
            sx={{
              position: "relative",
              borderRadius: "0 0 5rem 0",
              overflow: "hidden",
              width: "calc(100% + 2rem)",
              marginLeft: "-2rem",
              "&:hover img": {
                transform: "translateX(2rem)",
              },
              "&:hover .overlay": {
                backgroundColor: "rgba(141, 110, 172, 0.7)",
              },
            }}
          >
            {/* Image */}
            <Image
              src="image"
              alt="image"
              priority={false}
              sizes="100vw"
              style={{
                width: "100%",
                height: "100%",
                transition: "transform 0.3s ease",
              }}
              width={400}
              height={300}
            />
            {/* Gray Overlay */}
            <Box
              className="overlay"
              sx={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                backgroundColor: "rgba(211, 211, 211, 0.5)",
                pointerEvents: "none",
                zIndex: 1,
                transition: "background-color 0.3s ease", // Smooth transition for the background color
              }}
            />
          </Box>
        </Link>