I discovered this nice 3D Hover Image Effect - https://codepen.io/kw7oe/pen/mPeepv With the help of tutorials and guides I know I can style a component with Materials UI and apply it this way the CSS what I do. In the example link the Image is declared as background in CSS. I did it not in CSS but with the MUI Image tag. However it does not throw errors but its not working at all and I am unsure as why.

For the information I build it in React TS.

import React from 'react';
import { Box, Typography } from '@mui/material';
import Image from 'mui-image';

const styles = {
    body: {
        background: '#ECECEC',
    },

    footer: {
        width: '50%',
        marginLeft: '25%',
        textAlign: 'center',
        fontFamily: 'Julius Sans One, sans-serif',
        marginTop: '24px',
    },

    container: {
        maxWidth: '720px',
        margin: '24px auto 48px auto',
    },

    h1: {
        fontFamily: 'Montserrat, sans-serif',
        textTransform: 'uppercase',
    },

    h2: {
        fontFamily: 'Julius Sans One, sans-serif',
        fontSize: '2.5rem',
    },

    row: {
        marginTop: '12px',
    },

    column: {
        display: 'inlin-block',
        textAlign: 'center',
    },

    figure: {
        overflow: 'hidden',
    },

    'a:hover': {
        textDecoration: 'none',
    },

    'column img': {
        display: 'block',
        width: '100%',
        height: '300px',
    },

    tdimension: {
        width: '300px',
        height: '300px',
        margin: '20px auto 40px auto',
        perspective: '1000px',
    },
    'tdimension a ': {
        display: 'block',
        width: '100%',
        height: '100%',
        backgroundSize: 'cover',
        transformStyle: 'preserve-3d',
        transform: 'rotateX(70deg)',
        transition: 'all 0.8s',
    },
    'tdimension:hover a': {
        transform: 'rotateX(20deg)',
    },

    'tdimension 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',
    },
};

function Hover() {
    return (
        <Box style={styles.container}>
            <Box style={styles.row}>
                <Typography style={styles.h1}>Image Hover Effect</Typography> <Typography style={styles.h2}>3D Hover Effect</Typography>
            </Box>
            <Box style={styles.row}>
                <Box style={styles.tdimension}>
                    <Image src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png" style={styles['tdimension a ']}/>
                    <a href="#"></a>
                </Box>
            </Box>
        </Box>
    );
}

export { Hover };

CodePudding user response：

I would replace all style attributes with sx since MUI encourages the usage of sx prop and prefers it over style attribute: https://mui.com/system/the-sx-prop/

I would also stick to the background url inside the <a/> since the 3D Hover Effect transformations are being applied to that tag.

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>
);

Now inside your styles object wrap everything related to tdimension inside a nested styling object. Your <Box/> makes use of styles.tdimension and this way all your substyling won't get lost.

  ...
  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",
    },
  },

The result should be pretty identical to the codepen now.