CSS Blur Image Effect - css

Question

I'm trying to have an image in the body of the page that's full width. Not a background. On the Center of this image id like a bar that blurs and darkens the background image. Then id like words on the bar.
Here is what i got:
#superimagecontainer {
position: relative;
height: auto;
}
#container4 {
position: absolute;
left: 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 0;
}
#container4 img {
width: 100%;
position: relative;
z-index: 0;
}
#container4b {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 1;
}
#container4b img {
width: 100%;
position: relative;
filter: blur(3px) brightness(50%);
}
h8 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
opacity: 0.75;
}
<div id="superimagecontainer">
<div id="container4">
<img src="img/buildings750.jpg" alt="" />
</div>
<div id="container4b">
<img src="img/buildings750.jpg" alt="" />
<h8>THIS IS THE BEST TEXT SAMPLE EVER</h8>
</div>
</div>