Here is a Codepen showcasing a triple hover effect on an image: Codepen
I attempted to recreate this effect as a styled component in React Typescript using MUI and MUI Image, but encountered an error with my styling that is preventing it from working in my React App. Can someone help me identify the issue? I defined my CSS styles in a const variable and applied them inline.
App.tsx
import React from 'react';
import { Box } from '@mui/material';
import Image from 'mui-image';
const styles = {
body:{
background: "#3d4552",
fontFamily: "arial",
fontSize: "12px",
color: "#fff",
},
img: {
border: "1px solid #d2d2d2",
padding: "3px",
boxShadow: "0 0 15px rgba(0,0,0,.1)",
},
picContainer: {
maxWidth: "210px",
maxHeight: "210px",
margin: "50px",
},
pic: {
background: "#fff",
position: "absolute",
transition: "all 0.2s ease",
backfaceVisibility:"hidden",
},
"pix:nth:child(1)": {
zIndex: 3,
},
"pic:nth-child(2)": {
zIndex: 1,
},
"pic:nth-child(3)": {
zIndex: 2,
},
"picContainer:hover .pic:nth-child(1)": {
transform: "rotate(15deg)",
transition: "all 0.5s ease",
},
"picContainer:hover .pic:nth-child(2)": {
transform: "rotate(7deg)",
transition: "all 0.10s ease",
},
"picContainer:hover .pic:nth-child(3)": {
transform: "rotate(-5deg)",
},
picCaption: {
background: "#82a3d4",
padding: "10px 15px",
color: "#fff",
fontSize: "12px",
position: "relative",
zIndex: "10",
top: "90px",
left: "200px",
borderRadius: "3px",
transition: "all 0.5s ease",
opacity: 0,
},
"picCaption:hover": {
background: "#607fae",
},
"picContainer:hover .pic-caption": {
left:"230px",
opacity: 1,
},
};
function Hover() {
return (
<Box style={styles.picContainer}>
<Image src="https://via.placeholder.com/150" style={styles.pic} />
<Image src="https://via.placeholder.com/150" style={styles.pic} />
<Image src="https://via.placeholder.com/150" style={styles.pic} />
</Box>
);
}
export { Hover };
The error:
(property) MuiImageProps.style?: React.CSSProperties | undefined
Type '{ background: string; position: string; transition: string; backfaceVisibility: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
Types of property 'backfaceVisibility' are incompatible.
Type 'string' is not assignable to type 'BackfaceVisibility | undefined'.ts(2322)
index.d.ts(28, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & MuiImageProps & { children?: ReactNode; }'