Quiero que suceda la funcionalidad de desplazamiento (IU) que está sucediendo en este caso: IU deseada Fuente: https://www.loewshotels.com/santa-monica

Ahora, dado que modificar los estilos de la imagen de fondo es un poco complicado, tengo que usar el componente Box de Material UI y en él, coloqué la imagen y también realicé las transiciones deseadas, como alejar, etc. Sin embargo, no puedo agregar texto en el cuadro. componente (que de nuevo está básicamente dentro de un componente de tarjeta).

Código para la parte especificada:

 <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>

Estilos.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", },

Actualmente, mi interfaz de usuario se ve así: no suspendida