MUI: Overlap text over an image? - css

Question

I'm trying to make half of the text overflow (overlay) with the image on the right.
How do I achieve this within a Grid item? I tried using position "absolute", "relative" and "z-index", but it doesn't seem to work in the context of MUI. What is the best approach? 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

Answer 1

An overflown text over an image is no longer a text nor an image, its a composite component/container that should have its own name - say HomepageHeadliner (you should definitely try to use a name more specific to your domain if you can though!).
Put them into said container and use the reasoning you have with absolute positioning. No z-index should be required if the text comes before the image in the DOM tree.

Answer 2

You should use a box item, use the property background and inside the box add any typography text you want like this
<Box
sx={{
background: `url('/img/baner.svg')`,
backgroundSize: "733px 240px",
height: 240,
width: "auto",
}}
>
<Typography
variant="inherit"
fontSize="110%"
>
Here goes the text
</Typography>
</Box>