Transitioning backdrop-filter: blur on an element with "overflow: hidden" parent is not wo-CodePudding

I'm trying to apply a "fade-in/fade-out" transition to an absolute positioned div that has backdrop-filter: blur on it.
I have encountered some obstacles but I almost got it to work.

First off, backdrop-filter: blur is not animatable by default so, you have to animate the opacity of the element.
Then, since the parent of the element has overflow set to hidden, backdrop-filter is not working properly (at least in Chrome). It is possible to work around the issue following this (tl;dr; add a pseudo-element and apply the filter to that).

This two pieces though do not work combined, in fact, when the transition starts nothing happens until the amount of time specified in the duration is passed, then the filter is applied abruptly.

Is it possible to overcome this (ideally with just css)?

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
}

.container:hover .overlay {
  opacity: 1;
}

<div >
  <p> Lorem ipsum dolor sit amet </p>
  <div ></div>
</div>

CodePudding user response：

You probably want the transitioning to happen on the pseudo element and move the opacity of that.

p {
  height: 400px;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  z-index: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 500ms ease;
}

.container:hover .overlay::after {
  opacity: 1;
}

<div >
  <p> Lorem ipsum dolor sit amet </p>
  <div ></div>
</div>