I have the working example for rotating an image on hover here
It uses scale(), rotate() and transition properties when hovering over the parent element to animate the image. And overflow: hidden on the parent element to hide the excess from the image transformation.
When I try to replicate the same effect on React I see the image but the image does not rotate when i hover. But its all the same? What am I missing here?
import React from 'react';
import { Box } from '@mui/material';
import Image from 'mui-image';
const styles = {
hoverRotate: {
overflow: 'hidden',
margin: '8px',
minWidth: '240px',
maxWidth: '320px',
width: '100%',
},
'hoverRotate img': {
transition: 'all 0.3s',
boxSizing: 'border-box',
maxWidth: '100%',
},
'hoverRotate:hover img': {
transform: 'scale(1.3) rotate(5deg)',
},
};
function Rotate() {
return (
<Box style={styles.hoverRotate}>
<Image src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };
This way of styling doesn't detect hovers, hence use useState to set the hover state of the image (import it using import { useState } from "react";)
const [isHover, setIsHover] = useState(false);
Now, check if the Box is hovered or not, if hovered, set isHover to true, if not hovered, set it to false.
<Box
style={styles.hoverRotate}
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
>
{/* code */}
</Box>
Move your styles into the Rotate function. You are not assigning the key "hoverRotate img" to any of the styles hence it doesn't get applied. So change its name to something like image and add the hover code conditionally to it as shown below. The reason for moving styles into the Rotate function so that isHover stays in scope to get it's value.
const styles = {
hoverRotate: {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%"
},
image: {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%",
transform: isHover && "scale(1.3) rotate(5deg)"
}
};
Finally, set the image style to Image
<Image
src="https://picsum.photos/id/669/600/800.jpg"
style={styles.image}
/>
Checkout this sandbox: https://codesandbox.io/s/distracted-matan-c43ufb?file=/src/App.js:829-928
With the new @mui/system styling solution (sx prop), you just need to pass the styles object to the sx prop:
import React from "react";
import { Box } from "@mui/material";
const boxSx = {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%",
"& > img": {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%"
},
"&:hover > img": {
transform: "scale(1.3) rotate(5deg)"
}
};
function Rotate() {
return (
<Box sx={ boxSx }>
<img src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };
If you are missing the old @mui/styles (now deprecated) styling solution, you are missing makeStlyes, and then passing the resulting styles to the className prop:
import React from "react";
import Box from "@material-ui/core/Box";
import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
hoverRotate: {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%",
"& > img": {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%"
},
"&:hover > img": {
transform: "scale(1.3) rotate(5deg)"
}
}
});
function Rotate() {
const styles = useStyles();
return (
<Box className={ styles.hoverRotate }>
<img src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };