I'm currently troubleshooting my code in order to implement a hover effect on Mui <cards> when a user hovers over the object. I have managed to make it work partially, but the issue is that the effect gets applied to all objects instead of just one.
https://codesandbox.io/s/sharp-cookies-o23ps
To address this problem, I have created a sandbox for testing purposes.
Below is the snippet of code responsible for the hovering effect:
root: {
maxWidth: 310,
transition: "transform 0.15s ease-in-out",
"&:hover": { transform: "scale3d(1.05, 1.05, 1)" },
}
<Card
className={classes.root}
classes={{ root: state.raised ? classes.cardHovered : "" }}
onMouseOver={() => setState({ raised: true, shadow: 3 })}
onMouseOut={() => setState({ raised: false, shadow: 1 })}
raised={state.raised}
zdepth={state.shadow}
>