nunnayabuisness nunnayabuisness - 1 month ago 8
CSS Question

(CSS) Creating a box with a blurred background

So here is what I want to do

I have a text box in a page that I'm making, and what I want it to do is have the picture behind it blur ONLY inside the textbox. I'm terrible at explaining this, so I'll make a diagram here



~~~~background~~~
~~~~~~~~~~~~~~~~~
~~~~XXXXXXXXX~~~~
~~~~XXXXXXXXX~~~~
~~~~XX-Box-XX~~~~
~~~~XXXXXXXXX~~~~
~~~~XXXXXXXXX~~~~
~~~~~~~~~~~~~~~~~





what I want is for the background behind the "X" to blur

Answer

This can be achieved by using filter: blur();, z-index and pseudo elements :before or :after property, but this should be applied in a way so that the text on the box should look in front of the image.

Please have a look at the below code or checkout this Codepen.

.box {
  padding: 10px 20px;
  border: 1px solid #fff;
  color: #fff;
  position: relative;
  z-index: 2;
}

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

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/T1G833T4BI.jpg');
  filter: blur(6px);
  z-index: 1;
}
<div class="holder">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae tempora sapiente, tenetur in aliquid? Adipisci facilis animi, nam reiciendis tempora, incidunt voluptatibus quis dicta soluta culpa quam dolore laborum, obcaecati!</p>
  </div>
</div>

Hope this helps!