Apply a blur effect to the entire container without targeting a specific element within it

How can I add a filter: blur(20px) to the div with class named todo, while excluding the div with class called modal?

Could this be achieved using SCSS by any chance?

Sample Code:

.todo { display: grid; }  

.modal { display: grid;
position: fixed;
width: 500px;
height: 200px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: #fafafa;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
visibility: visible;
opacity: 1; }
<div class='todo'> <div class='todo__sidebar'>     
<ul>        
<li>item 1</li>        
<li>item 2</li>     
</ul>
    
<div class='modal'>       
<span>12345</span>   
</div>     
</div> </div>

Codepen Link

htmlcssblur

Answer №1

You have the option to enclose the modal within a container and apply backdrop-filter:

.todo {
  position: relative;
  display: grid;
}

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  height: 100vh;
  width: 100%;
}

.modal {
  display: grid;
  width: 500px;
  height: 200px;
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}
<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <div class="modal-container">
      <div class='modal'>
        <span>12345</span>
      </div>
    </div>
  </div>
</div>

However, keep in mind that the support for this feature is limited.

An alternative approach is to utilize JavaScript:

document.querySelector('ul').style.filter = 'blur(5px)';
.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}
<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
    <div class='modal'>
      <span>12345</span>
    </div>
  </div>
</div>

Alternatively, you can rearrange the elements in the HTML and utilize the sibling selector (~):

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.modal ~ ul {
  filter: blur(5px);
}
<div class='todo'>
  <div class='todo__sidebar'>
    <div class='modal'>
      <span>12345</span>
    </div>

    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </div>
</div>

These solutions may not be perfect, but they provide some options if necessary.

Answer №2

If you try to make a child element of a blurred element clear, it won't work.

Think of the process of rendering an element through CSS or SVG as if the entire element, including its children, is first drawn onto a buffer (like a raster image) which is then combined into the parent elements.

-- Filter Effect Module Level 1

* This is my interpretation.

To achieve a blur effect, only add the filter attribute to the specific element you want blurred. For more information, refer to responses in How to blur (css) div without blur child element and How to apply a CSS filter to a background image.

Answer №3

To ensure that the div with class modal is positioned on top of the todo div, you need to remove it as a child element of todo. Below is the correct code snippet:

.todo {
  display: grid;
  filter: blur(20px);
}
    
.modal {
  display: grid;
  z-index: 1000;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}
<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </div>
</div>
<div class='modal'>
     <span>12345</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with script execution on Ajax tab

I'm currently using JQuery UI tabs to load content through Ajax. I have a situation where two tabs are supposed to load HTML content and execute a script to hide or show certain elements in the loaded content. However, I encountered an issue where the ...

jqueryhtmlajaxtabs

Sending users to a different page in case the linked document from <a> cannot be located

I am in search of a way to set up an alternative link for a hyperlink in case the primary link does not exist, similar to how 'alt' works for images. I am aware of the existence of 'onerror' but it doesn't work for HTML links. I wo ...

htmlhttp-redirecthyperlink

Using PHP variables in HTML frameset URL for dynamic content passing

Looking for help to pass a PHP variable through a frameset URL. I've been trying different techniques without success so far. Can anyone provide some guidance? Here is an example of my code and what I have attempted: <?php $var = 2+3 ?> < ...

phphtmlhtml-frames

Exploring an Array Based on User's Input with JavaScript

Looking to implement a search functionality for an array using AJAX. The array is pre-populated with values, and the user will input a value in a HTML text box. If the entered value is found in the array, it should display "Value found", otherwise "not f ...

javascripthtmlajax

Laravel 4.2 email template not applying CSS inline style for text color

Working on setting up email functionality in Laravel 4.2 and I've got an email template ready to go. The data for the emails is stored in an array, but I'm running into an issue where if I pass a parameter like $variable, the styles are only bein ...

phphtmlcssemaillaravel-4

Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code: @keyframes fade-in{ 0%{ opacity: 0%; } 100%{ opacity: 100%; } } @keyframes fade-out{ 0%{ opacity: 100%; } 100%{ opacity: 0%; } } Impleme ...

javascripthtmlcss

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

javascriptioshtmlmobilesafari

Libraries that provide webkit support for all browsers

Looking for a library that supports CSS webkit across various browsers, including older ones like ie6. Preferably written in JavaScript. Any recommendations? ...

javascriptcss

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Is there a way to retrieve the day of the week based on the date provided by the user

function retrieveWeekday() { var input = document.getElementById("input"); } <form> <input type="date" placeholder="dd:mm:yy" id="input"/> <input type="button" value="get weekday" onclick="retrieveWeekday()"/> ...

javascripthtml

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

javascriptphphtml

The hyperlink is pointing to the local host instead of the intended website

I'm having an issue with a table that has various columns. One of the columns is for websites, and when clicked on, it should redirect me to the corresponding website. However, it seems to be referencing my localhost instead. It should actually be: ...

phpsqlhtml

Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image. Despite my attempts with the following code, it did not yield the expected result: .background-image { border :0px; background-image: url(/images/icon.png); ...

css

Steps to display the error message in a modal popup header using Bootstrap 5

How can I display an error message in the header section using Bootstrap 5? <div class="modal-header"> <h5 class="modal-title">Add Email Group</h5> <div class="error">Invalid data, Please contac ...

cssflexboxbootstrap-5bootstrap5-modal

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Currently, I am in the process of developing a website using AngularJS and ASP.NET, incorporating Angular Material. However, I encountered an issue where scrolling on the page causes the top navigation to move up the body or essentially "disappear" when cl ...

htmlcssangularjsangularjs-material

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; con ...

cssangularangular2-directivesangular-directive

"Utilizing JavaScript, you can remove an element by clicking on the outer element within the

I need the functionality where, when a user clicks on an input type="checkbox", a corresponding textarea is displayed. Then, if the user clicks anywhere except for that specific textarea, it should be hidden. Can someone assist me with implementing this fe ...

javascripthtmljquerycss

Looking for assistance with the navbar notification icon?

My navbar notification button is causing a problem by resizing the navbar. example Below is the code snippet: .badge-notify{ background:red; position:relative; top: -20px; left: -35px; } <ul ...

htmlcssbuttonnotificationsnavbar

Positioning a button on the side of the screen while a hidden side panel is open

I am attempting to create an animation using a side panel that will slide into view when a button is clicked. Here is how it appears when the page loads: https://i.sstatic.net/JPQ2W.jpg When the user clicks on one of the buttons, the notes panel will be ...

jqueryhtmlcssjquery-uisass

Unable to fetch data from Django Template (.html) in my views

I'm a beginner in the world of Django and I'm currently working on a project that involves managing learning objects metadata. One of the essential functions of the system is to display the L.O. metadata directly in the web browser. Within my HT ...

pythonhtmldjangotemplates