I was wondering if its possible to add an image over a box-CodePudding

Hey guys i was wondering how is it possibile to achieve this in react? Im using MUI so no hard css is needed. I tried but didnt work out. The components are 1 image on top of a box.

this is what i want to achieve:

CodePudding user response：

check this link (https://codesandbox.io/s/jovial-cartwright-mvmpg9?file=/src/App.js) and code below

import "./styles.css";
import Box from "@mui/material/Box";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Box
        sx={{
          marginTop: "200px",
          position: "relative",
          height: 300,
          backgroundColor: "primary.dark",
          "&:hover": {
            backgroundColor: "primary.main",
            opacity: [0.9, 0.8, 0.7]
          }
        }}
      >
        <img
          src="https://www.pikpng.com/pngl/b/176-1763996_secretary-png-clipart-business-women-png-transparent-png.png"
          alt=""
          style={{
            position: "absolute",
            height: "500px",
            bottom: 0,
            right: 0
          }}
        />
      </Box>
    </div>
  );
}