css filter: blur frosting glass effect not working, no blur, content is influenced

Question

I want to have a background photo with a div in front. The div should have a blurry dark background and white text.

But what it is doing at the moment is: dark background without blur and dark text. Please help me!

#section0 {
background-color: lightgreen; /*normally the photo*/
}

.blurwrapper {
position: relative;
overflow: hidden;
}

.blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
filter: blur(1px);
opacity: 0.2;
transform: scale(1.5);
z-index: 1;
}

h1 {
color: white;
}
.about {
color: white;
background: none;
margin: auto;
margin-top: 20px;
max-width: 800px;
font-size: 15px;
padding: 20px;
text-align: center;
letter-spacing: 2px;
color: white;
border-top: 1px solid white;
z-index: 2;
}

<div class="section active" id="section0">
    <div class="blurwrapper">
      <h1><span>...</span></h1>
      <p class="about">...</p>
      <div class="blur"></div>
    </div>
</div>

Answer 1

the blur filter as you can see is applied to the current element. This means that if you want to blur the image you need to apply the blur to the #section0 container that has the background-image set. If you have a colour instead of an image you will see only the border blurred.

For more information please have a look at the documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

To give a more clear example using your code: http://codepen.io/ThePeach/full/egYbbe/