I need to create an overlay that spans the whole image. But I am not sure how to do that. I tried with relative and absolute positions on CSS. Any way, with CSS or without CSS will do.

Code is available in this playCode.

import React from 'react';
import { Container } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';

export function App(props) {
  return (
    <div className='App'>
      <Grid container>
        <Grid>
          <h1>Do not hide me.</h1>
        </Grid>
        <Grid>
          <Container
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'blue',
            }}
          >
            <img
              style={{
                maxHeight: 300,
              }}
              src={
                'https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80'
              }
              alt='img'
            ></img>
            <h1
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                opacity: 0.7,
                backgroundColor: 'red',
                width: 400,
              }}
            >
              Hi there, this text should be only over the image.
            </h1>
          </Container>
        </Grid>
      </Grid>
    </div>
  );
}

// Log to console
console.log('Hello console');

CodePudding user response：

I have played with the code in the provide platform and you can copy the following code and paste it in the playground.

import React from 'react';
import { Container } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';

export function App(props) {
  return (
    <div className='App'>
      <Grid container>
        <Grid>
          <h1>Do not hide me.</h1>
          {/*<another image/>*/}
        </Grid>
        <Grid>
          <Container
            style={{
              display:"flex",
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'blue',
              position: "relative"
            }}
          >
            <img
              style={{
                maxHeight: 300,
              }}
              src={
                'https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80'
              }
              alt='img'
            ></img>
            <h1
              style={{
                position: 'absolute',
                top: "-21px",
                padding: "0 20px",
                opacity: 0.7,
                height: "100%",
                backgroundColor: 'red',
              }}
            >
              Hi there, this text should be only over the image.
            </h1>
          </Container>
        </Grid>
      </Grid>
    </div>
  );
}

// Log to console
console.log('Hello console');

Changes

I have changed style of Container

• gave it a position of relative so that the h1 tag's position becomes absolute relative to container and not relative to whole page.

rest of the changes are in visible in h1 tag