How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

Remove Background Blur from Child Elements

You have a

with a background image applied with a blur effect. However, all the child elements are also affected by this blur, which is undesirable. This article provides a solution to resolve this issue, allowing you to maintain the blur effect on the background image while preserving the crispness of the child elements.

Solution: Create an Overlay Element

To achieve this, you can create a separate

within the parent element and apply the background image and blur effect to this new element. Then, position this element behind the existing child elements using z-index values.

Here's the modified HTML structure:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="/static/imghwm/default1.png" data-src="images/zwemmen.png" class="lazy" alt="">
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div></code>

CSS:

<code class="css">.content {
    float: left;
    width: 100%;
}

.content .overlay {
    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);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}</code>

In this setup, the .overlay element has the blur effect applied, while the .opacity element blocks this effect from reaching the child elements, resulting in sharp and focused child elements over a blurred background.

The above is the detailed content of How to Remove Background Blur from Child Elements While Maintaining Blurred Background?. For more information, please follow other related articles on the PHP Chinese website!