javascript - 将文本放置在 Material UI 的 Box 组件上

Question

我希望悬停功能发生(UI)，这在这种情况下发生: Desired UI 来源:https://www.loewshotels.com/santa-monica

现在，由于修改背景图像样式有点复杂，我必须使用 Material UI 中的 Box 组件，并在其中放置图像并完成所需的过渡，例如缩小等。但是我无法添加文本在 Box 组件上(它基本上又位于 Card 组件内部)。

指定部分的代码:

<Grid item xs={4}>
        <Card
          onMouseDown={console.log("fewfwg")}
          className={classes.cardWelcomeTwo}              
        >
          <CardActionArea>
            <Box variant="outlined" style={{ position: "relative" }}>
              <img
                className={classes.paperImgWelcome}
                src="https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg?&targetx=0&targety=-25&imagewidth=500&imageheight=751&modelwidth=500&modelheight=700&backgroundcolor=AF7163&orientation=1"
                alt="nothing"
              />
              <CardContent>
                <Typography
                  variant="h4"
                  component="h2"
                  className={classes.welcomeGridHeadingText}
                >
                  Explore The City
                </Typography>
              </CardContent>
            </Box>
          </CardActionArea>
        </Card>
      </Grid>

Styles.js:

paperImgWelcome: {
    flexGrow: 1,
    position: "relative",
    "&:hover ": {
      display: "flex",
      transition: "0.6s all ease-in-out",
      // animationTimingFunction: "ease-out",
      transform: "scale(1.1)",
      backgroundSize: "75%",
      opacity: "0.75",
    },
  },
  cardWelcomeTwo: {
    position: "relative",
    height: 510,
    flexGrow: 1,
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",

  },
welcomeGridHeadingText: {
    position: "absolute",
    textAlign: "center",
    color: "white",
    fontFamily: "'Lato'",
    fontSize: "60px",
    letterSpacing: "5px",
    lineHeight: "60px",
  },

目前，我的用户界面如下所示: not hovered hovered

Answer 1

您可以将 ::after 伪元素与 content 属性结合使用，并仅在悬停时显示它。

这是一个简单的例子:

CSS

.backgroundImage {
  background-image: url("https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg");
  height: 500px;
  color: white;
  padding: 50px;
}

.backgroundImage:hover::after {
  content: "For a ride";
}

HTML

<div className="backgroundImage">
  <h1>Let's Go</h1>
</div>

为了简单起见，它仅使用纯 HTML/css。

如果您想在material-ui/React元素中看到它的实际效果，这里是sandbox link .