Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I want to blur only the background of my grid, but it focuses entirely on React using MakeStyles

I hava a page that I have my course informations and i want add some background with a blur, but when I add this blur, all of my grid get a blur and I can see anything, how i can put blur only on my background?

My code is it:

        <Grid
          className={classes.backgroundDescription}
          item
          xs={12}
          md={6}>
          <div>
            <CourseDescription onLike={onLike} data={info} icon={icon} />
          </div>
        </Grid>

const useStyle = makeStyles((theme) => ({
  backgroundDescription: {
    backgroundColor: '#4040ff',
    filter: 'blur(10px)',
  }
)}

I tried a lot of things, separte the divs and grids, use a backdropFilter, comeyhing like this and it doest works too

This is with a filter blur
This is whit out a filter

Remeber that I want the background blue with a blur, only a background

Tags:

2

Answers


  1. 0

    You have use position attribute of css

    1.create a dummy div for background

    Importantly don’t add your element into dummy div.
    Apply this css
    like

         .dummydiv{

      position:relative;

     }

    .element {
       position: absolute;
       top:0;
       left:0;
     }
    Login or Signup to reply.
  2. 0

    Include the following CSS to attain a precise and accurate solution,

    const useStyles = makeStyles((theme) => ({
   backgroundDescription: {
       position: 'relative',
       overflow: 'hidden',
       '&::before': {
           content: '""',
           position: 'absolute',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
           backgroundColor: '#4040ff',
           filter: 'blur(10px)',
       },
       '& > div': {
           position: 'relative',
           zIndex: 1,
       },
   },
}));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search