Apply a blurred effect to the entire website except for one specific element

Question

Apply a blurred effect to the entire website except for one specific element

Recently, I implemented the .blur class on the body element to create a blurred effect for the entire website.

CSS

.blur {
    filter: blur(1px);
    filter: url("blur.svg#gaussian_blur");
    -webkit-filter: blur(1px);
    -o-filter: blur(2px);
}

HTML

<body class="blur">
...
<div class="mustBeClear"></div> <!-- located somewhere in the page-->
...
</body>

The question arises on how to maintain the clarity of elements with the .mustBeClear class while applying the overall blur effect.

I attempted the following:

.mustBeClear{
    filter: none; 
    -webkit-filter: none;
    -o-filter: none;
}

Unfortunately, this solution did not yield the desired outcome!

html css

Answer 1

Answer №1

It is impossible to selectively undo an SVG filter for a single child element because filters are applied to the entire parent element.

A better approach would be to only blur the specific element that needs to be blurred and then use absolute positioning on another element without the blur effect.

Here is a practical example to demonstrate this concept:

.container {
    position: relative;
    top: 50px;
    left: 50px;
}

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);
}

#text {
    position: absolute;
    left: 50px;
    top: 50px;
}

<div id="container">
    <div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
    </div>
    <div id="text">Not Blurred Text</div>
</div>

Answer 2

It is impossible to selectively undo an SVG filter for a single child element because filters are applied to the entire parent element.

A better approach would be to only blur the specific element that needs to be blurred and then use absolute positioning on another element without the blur effect.

Here is a practical example to demonstrate this concept:

.container {
    position: relative;
    top: 50px;
    left: 50px;
}

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);
}

#text {
    position: absolute;
    left: 50px;
    top: 50px;
}

<div id="container">
    <div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
    </div>
    <div id="text">Not Blurred Text</div>
</div>

Apply a blurred effect to the entire website except for one specific element

Answer №1

Similar questions

Is there a way to embed a span within a word without causing it to break during wrapping?

send a variable across multiple web pages at the same time

HTML experiences confusion as JSON tosses undefined data

Load the div first before delaying the load of the next element using jQuery

Create HTML content from a file retrieved from the server

Save a FlexTable as an HTML file using R script

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

SQL post commenting management system: aggregating all comments to a single post

In JavaScript, you can update the class named "active" to become the active attribute for a link

Show me how to customize the default confirmation box using just CSS!

The HTML file that was downloaded appears to contain jumbled and nonsensical text

Unnecessary spacing found within the side navigation menu

What is the best way to iteratively fade in data from a MySQL database one by one?

What is the best way to incorporate a custom HTML tag into this PHP array?

Elements of <nav> within a <footer> section

The table's width exceeds the appropriate size

How to dynamically adjust font size using Javascript

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

What steps should I take to make my include function operational?

The reliability of jQuery posting varies