在 Material UI 的框组件上放置文本

Question

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

现在由于修改背景图像样式有点复杂，我必须使用 Material UI 中的 Box Component 并在其中放置图像并完成所需的转换，例如缩小等。但是我无法在 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",
  },

目前，我的 UI 看起来像这样： 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。

在 Material UI 的框组件上放置文本

Place text on Box Component of Material UI

javascript

css

reactjs

material-ui

jss