如何在Material UI的Box组件上添加文本并实现指定悬停UI效果

解决方案 #

文本无法正常显示是因为绝对定位的文本层级低于图片被覆盖，且缺少定位偏移参数，按以下要求修改即可：

1. 调整样式代码
   将图片的过渡属性从hover状态移到默认状态，保证移入移出都有平滑动画；给卡片添加overflow属性避免图片缩放溢出；给文本样式添加层级属性和居中偏移参数，保证文字浮在图片上层。
   修改后的样式代码如下：

paperImgWelcome: {
  width: "100%",
  height: "100%",
  objectFit: "cover",
  transition: "0.6s all ease-in-out",
  "&:hover": {
    transform: "scale(1.1)",
    opacity: "0.75",
  },
},
cardWelcomeTwo: {
  position: "relative",
  height: 510,
  flexGrow: 1,
  overflow: "hidden",
},
welcomeGridHeadingText: {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  zIndex: 2,
  textAlign: "center",
  color: "white",
  fontFamily: "'Lato'",
  fontSize: "60px",
  letterSpacing: "5px",
  lineHeight: "60px",
},

2. JSX结构无需额外修改，原有代码即可正常运行，修改后文本会始终悬浮在图片上层，悬停时图片缩放、透明度降低的效果也会正常触发，文字始终清晰可见。

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