'MUI: Overlap text over an image?

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 enter image description here

cssmaterial-ui


Solution 1:[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.

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nathan
Solution 2 Kevin Mijares

Related Questions