const mediaStyle = { transition: "transform 1s", "&:hover": { transform: "scale(1.6)", }, };tengo esta tarjeta Una vez que pase el mouse sobre una tarjeta específica, aparecerá el medio de la tarjeta o la imagen que contiene. Probé los códigos anteriores, pero no funciona
{data.map((i) => ( <Grid item xs={12} sm={6} md={4} lg={3} key={listOfPrjects.indexOf(elem)} > <Card style={cardStyle}> <CardMedia style={{ mediaStyle }} /> <CardHeader title={i.title}/> </Card> </Grid> ))} </Grid>const mediaStyle = { transition: "transform 1s", "&:hover": { transform: "scale(1.6)", }, };Creo que esto no funciona con React.
editar
Lo siento, no noté que estás usando material-ui. De todos modos dejo aquí soluciones válidas para React simple.
Podrías usar una clase css
.scale{ transition: "transform 1s", } .scale:hover{ transform: "scale(1.6)" }o cambiar el estilo usando el estado
editar
Versión anterior fija
const [cardHovered, setCardHovered] = useState(null); const mediaStyle = { transition: "transform 1s", }; const hoverStyle = { transform: "scale(1.6)" } ... {data.map((i, elementIndex) => ( <Grid> <Card> <CardMedia style={elementIndex == cardHovered ? { ...mediaStyle, ...hoverStyle} : mediaStyle} onMouseEnter={()=>{setCardHovered(elementIndex)}} onMouseLeave={()=>{setCardHovered(null)}} /> <CardHeader title={i.title}/> </Card> </Grid> ))}Aquí hay una explicación: https://stackabuse.com/how-to-style-hover-in-react/
En su CardMedia dentro del componente Card , puede agregar el estilo para el desplazamiento
return ( <> {data.map((i, elementIndex) => ( <Card sx={{ maxWidth: 345, "&:hover": { ".MuiCardMedia-root": { transform: "scale3d(1.6, 1.6, 1)" } } }} > <CardMedia component="img" height="140" image="https://mui.com/static/images/cards/contemplative-reptile.jpg" alt="green iguana" // Add this if you want the hover on the image only and remove the above hover // sx={{ // transition: "all 0.2s ease", // "&:hover": { // transform: "scale3d(1.6, 1.6, 1)" // } // }} /> <CardContent> <Typography gutterBottom variant="h5" component="div"> Lizard </Typography> <Typography variant="body2" color="text.secondary"> Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica </Typography> </CardContent> <CardActions> <Button size="small">Share</Button> <Button size="small">Learn More</Button> </CardActions> </Card> ))} </>);
Aquí hay una caja de códigos de trabajo