const mediaStyle = {
transition: "transform 1s",
"&:hover": {
transform: "scale(1.6)",
},
};
I have this card. Once I hover on a specific card, the card media or the picture on it will pop up. I tried the codes above, but it does not work
{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)",
},
};
I think this doesn't work with React.
edit
Sorry, didn't notice you are using material-ui. Anyway I leave here valid solutions for React plain.
You could use a css class
.scale{
transition: "transform 1s",
}
.scale:hover{
transform: "scale(1.6)"
}
or change style using state
edit
Fixed previous version
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>
))}
Here's an explanation: https://stackabuse.com/how-to-style-hover-in-react/
In your CardMedia inside the Card component you can add the styling for the hovering
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>
))}
</>
);
Here is a working codesandbox