how can I get blur effect that only works in box

Question

I am trying to get a blur effect in a box like this, but at the moment, the blur effect covers the whole page instead of only inside the box

Is it not a good idea to add a background image for blur effect by using :before?

body {
  background: url('https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80');
  background-position: 0 -200px;
  background-size: cover;
}

#wrap {
  width: 70%;
  margin: 50px auto;
  border: 1px solid #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.box {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.content:before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80');
  background-position: 0 0;
  background-size: cover;
  filter: blur(10px);
}

p {
  color: #fff;
  text-align: justify;
}

<div id="wrap">
  <div class="box">
    <div class="content">
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel eros justo. Proin in tincidunt mi. Vestibulum quis velit vestibulum lectus eleifend ultrices ut ac mi. Quisque sagittis faucibus diam, sit amet rhoncus nisi fermentum in. Suspendisse
      faucibus interdum odio. Quisque iaculis accumsan sagittis. Integer id neque id turpis ornare ultricies at vel tellus.
    </p>
  </div>
</div>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, May 27 '20 at 13:16
I have made an alternative solution ([JSFiddle](https://jsfiddle.net/Zeraora/oh7q25su/)) using `backdrop-filter: blur()`, but it has limited support: [caniuse](https://caniuse.com/#feat=css-backdrop-filter). — Daemon Beast, May 27 '20 at 13:45

score 0 · Accepted Answer · answered May 27 '20 at 13:20

0

Please add position: relative; to #wrap. It will be like this. #wrap {position: relative; width: 70%; margin: 50px auto; border: 1px solid #fff; box-sizing: border-box; overflow: hidden;}

answered May 27 '20 at 13:20

TopWebGhost

335
1
8

how can I get blur effect that only works in box

1 Answers1