.content {
float: left;
width: 100%;
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
}
.info {
float: left;
margin: 100px 0px 0px 30px;
width: 410px;
}
<div class="content">
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>
If I do not want to blur the button, what do I need to do?
When using the blur
or opacity
property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.
There is an alternate solution: create two elements inside your parent div
– one div
for the background and another div
for the contents. Set position:relative
on the parent div
and set position:absolute; top:0px; right:0px; bottom:0px; left:0px;
(or set height/width to 100%) to the child element for the background. Using this method, the content div
will not be affected by properties on the background.
Example:
#parent_div {
position: relative;
height: 100px;
width: 100px;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}
<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>
If you see the background masking over the content, then use the z-index
property to send the background behind the second content div
.