I want to create a design where half of the text overflows and overlays the image on the right side. How can I achieve this using a Grid item? I've tried using "absolute", "relative", and "z-index" positions, but they don't seem to work in the MUI context. What would be the best approach for this? Thank you in advance.
code
import React, { useState } from 'react';
import './../App.css';
import {Grid, Typography, Paper, useMediaQuery, useTheme, Container, CardMedia} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
imgSpacing: {
marginLeft: '20px'
},
holder: {
display: 'flex'
},
holderText: {
},
holderImg: {
flexGrow: '1'
}
}))
function Homepage() {
const classes = useStyles();
return (
<div>
<section>
<Container maxWidth={false} className={classes.img}>
<Grid item xs={12} container>
<Grid item xs={2} />
<Grid item xs={5}>
<div className={classes.holder}>
<div className={classes.holderText}>
<Typography >
<h1>
Lorem ipsum dolor sit amet.
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Typography>
</div>
<div className={classes.holderImg}>
<Paper >
<CardMedia
component="img"
image={require(`../images/LA_night_car.jpg`)}
/>
</Paper>
</div>
</div>
</Grid>
<Grid item xs={2}>
<Paper className={classes.imgSpacing}>
<CardMedia
component="img"
image={require(`../images/skater.jpg`)}
/>
</Paper>
</Grid>
<Grid item xs={3} />
</Grid>
</Container>
</section>
</div>
);
}
export default Homepage;
image for reference https://i.stack.imgur.com/0PBBv.png