In scale, the bottom blurred element overlaps the scaled element

March 22, 2022

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 class="container">
  <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 class="box">
    <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>

>Solution :

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 class="container">
  <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 class="box">
    <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>