To enhance the styling consistency in MUI, it is recommended to replace all instances of the style attribute with the sx prop as advocated by MUI guidelines. The use of the sx prop is preferred over directly using the style attribute:
https://mui.com/system/the-sx-prop/
Additionally, maintaining the background url inside the <a/> tag is crucial for applying the 3D Hover Effect transformations effectively.
return (
<Box sx={styles.container}>
<Box sx={styles.row}>
<Typography sx={styles.h1}>Image Hover Effect</Typography>
<Typography sx={styles.h2}>3D Hover Effect</Typography>
</Box>
<Box sx={styles.row}>
<Box sx={styles.tdimension}>
<a href="#"></a>
</Box>
<Divider sx={{ padding: "1px" }} />
</Box>
</Box>
);
To maintain clarity and prevent loss of sub-styling, it is advisable to nest everything related to tdimension within a separate styling object inside your styles object. This approach ensures that all subtleties in styling are preserved when utilizing styles.tdimension.
...
tdimension: {
width: "300px",
height: "300px",
margin: "20px auto 40px auto",
perspective: "1000px",
a: {
background:
'url("https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png")',
display: "block",
width: "100%",
height: "100%",
backgroundSize: "cover",
transformStyle: "preserve-3d",
transform: "rotateX(70deg)",
transition: "all 0.8s",
},
"&:hover a": {
transform: "rotateX(20deg)",
},
"a:after": {
content: '""',
position: "absolute",
left: 0,
bottom: 0,
width: "100%",
height: "40px",
background: "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))",
transform: "rotateX(90deg)",
transformOrigin: "bottom",
},
},
By following these recommendations, your code structure will closely resemble the one on Codepen.