Text overlay opacity - html

Question

I'm trying to make an overlay on an image in css but I have some problems I don't know how to solve.
Check this image out, this is a mockup in PhotoShop:
but I got this:
As you can see the blockquote and text also have a opacity, this is the only thing I actually need to solve(the blur is not required, would appreciate a good example though)
I also created a codepen, other image, same code
img.header {
width: 100%;
}
div.wrapper {
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
height: 100%;
position: absolute;
/* absolute position (so we can position it where we want)*/
bottom: 0px;
/* position will be on bottom */
left: 50%;
width: 50%;
/* styling bellow */
background-color: #cddc39;
color: white;
opacity: 0.4;
/* transparency */
filter: alpha(opacity=60);
/* IE transparency */
}
p.description_content {
padding: 10px;
margin: 0px;
font-size: 30px;
}
<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<!-- image -->
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
' />
<!-- description div -->
<div class='description'>
<!-- description content -->
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
<!-- end description content -->
</div>
<!-- end description div -->
</div>
</div>
</div>
</div>

Answer 1

img.header { width: 100%;}
div.wrapper {
position: relative;
overflow:hidden;
}
div#imageBlur, div.description {
height: 100%;
position: absolute;
left: 50%;
width: 50%;
}
div#imageBlur {
background-repeat: no-repeat;
background-size: cover;
background-position-y: 8px;
background-position-x: 100%;
-webkit-filter: blur(3px);
filter: blur(3px);
bottom: 8px;
}
div.description {
bottom: 4px;
background-color:rgba(205, 207, 57, 0.4) ;
color: white;
}
p.description_content {font-size: 50px;}
blockquote{
border-left:solid 2px #ffd800;
padding-left:5px;
font-size: 25px;
}
<div id="praktijk" class="col s12">
<div class="row pad-top">
<div>
<div class='wrapper'>
<img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
<!-- description div -->
<div id="imageBlur" style="background-image: url(https://www.w3schools.com/w3images/fjords.jpg);"></div>
<div class='description'>
<p class='description_content'>
<blockquote>
This is an example quotation that uses the blockquote tag.
</blockquote>
</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

If you just want to apply the opacity to background, in this case just a background color, I prefer the rgba color.
See this : css color https://www.w3schools.com/cssref/css_colors_legal.asp
for apply this property, you must translate your color from hex to rgb color
Here the page : https://www.webpagefx.com/web-design/hex-to-rgb/
so your wrapper class will just be this:
.div.description{
height: 100%;
position: absolute;
bottom: 0px;
left: 50%;
width: 50%;
background-color: rgb(205,220,57,0.6);
color: white;
}

Answer 3

Sir Farhad Bagherlo got the right one. Just change the overlay's background color to rgb/rgba of the color and tone you want then remove the opacity. That makes it easeir.
Here is a list of colors you may use: https://www.december.com/html/spec/colorrgbadec.html

Answer 4

Oh, I'm sorry, I don't see the blured element
If you want to make only the background blured, you must not put the text inside the background. Instead make 2 div:
First div as the background and filtered blur, then set the position:absolute, fully width and height. Dont forget to set position:relative to the parent;
Second div as the text
I hope this will help