CSS - Blur background img but it also applies to the img in front of it

Question

I'm applying the blur filter to the background image of a wrapper div. For some reason, the blur filter also gets applied to the img element within the wrapper div.

#wrapper-5 {
  background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
  filter: blur(5px);
}
#img-5 {
  clip-path: circle(30%);
  filter: grayscale(80%);
}

<div id="wrapper-5">
      <img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>

You need to give child element z-index which is higher than parent to make it rise above that filter effect — Muhammad Asadullah, May 14 '20 at 19:27

score 3 · Accepted Answer · answered May 14 '20 at 19:30

That's expected, your are blurring the parent element not the background and that will include any children.

Use a pseudo-element instead and blur that.

#wrapper-5 {
  position: relative;
}

#wrapper-5:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
  filter: blur(5px);
}

#img-5 {
  clip-path: circle(30%);
  filter: grayscale(80%);
}

<div id="wrapper-5">
  <img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>

CSS - Blur background img but it also applies to the img in front of it

1 Answers1