In scale, the bottom blurred element overlaps the scaled element-CodePudding

Goal: The scaled element is not overlapped by the bottom element.

Problem: With a css transition, I scale up an element. In the parent element, the content above and below the child element is blurred. But unfortunately the lower blur effect overlaps the forgotten container.

Question What do I have to do so that the blur effect does not overlay the scaled container?

Note: z-index had no effect on me.

My stack Linux / Firefox

My code

.container>*:not(.box) {
  background: black;  
  filter: blur(8px);  
  transition: filter 1s, background 1s;  
  filter: blur(8px); 
}
.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
  transition: scale 1s, background 1s, filter 1s;   
}
.box:focus-within {
  transition: scale 1s, background 1s; 
  scale: 1.8;
  background: lightblue;  
}

<div >
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div >
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

CodePudding user response：

Add position: relative (to create a new stacking context) along with a z-index (which you can educate yourself on here):

.container>*:not(.box) {
  background: black;  
  filter: blur(8px);  
  transition: filter 1s, background 1s;  
  filter: blur(8px); 
}
.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
  transition: scale 1s, background 1s, filter 1s;
  position: relative;
  z-index: 1;
}
.box:focus-within {
  transition: scale 1s, background 1s; 
  scale: 1.8;
  background: lightblue;  
}

<div >
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div >
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

CodePudding user response：

Normally CSS acts wierdly when you place elements from top to bottom without any of them having z-index, so in your code when you click input, top side of your box which normally(before scale) first p element stays there, does not have blur but bottom side(second p element) have blur.

So it acts like even if you do not add z index to any element

<div >
  <p >some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div >
    <div>
      <input >
      <input >
    </div>
  </div>
  <p >some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

.firstPelement -> z-index 0

.box -> z-index 1

.secondPelement -> z-index 2

That is why top side is not blurred but bottom side is blurred but when you add z-index to

.box{
  position:relative;
  z-index:1;
}

any element it acts like now all of them have z-index:0 but only .box have z-index:1

Question: do you think it makes a difference if i set the container or just the box position:relative?

If you add z-index to your container all of the elements have z-index:1 but still the same inside z-index rule happens to them top is not blurry but bottom is blured