Solution 1 :

The way rendering works, you can’t blur a parent without blurring a child. Rendering is done as a tree, with caching the entire way.

What you can do is blur all children except one:

#items:hover * {
  filter: blur(3px);

#items:hover *:hover {
  filter: none;
<div id="items">

Solution 2 :

Here is an example in JavaScript that will blur everything except the image that was clicked on. If you click in the <section> on something other than the image, it will all come back into focus.

const sectionClick = (e) => {
  const clickedOn =;
  const textWrapper = document.querySelector('.textWrapper');
  const cardWrapper = document.querySelector('.cardWrapper');
  const allCards = cardWrapper.children;

  if (clickedOn.parentElement === cardWrapper) { = 'blur(10px)';
    for (const element of allCards) {
      clickedOn === element ? = 'none' : = 'blur(10px)'
  } else { = 'none';
    for (const element of allCards) { = 'none';
.section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
<section class="section" onclick="sectionClick(event)">
  <div class="textWrapper">
    <p> Amet do nulla dolore sit mollit cillum officia eu officia est aliqua eu. Aliqua dolore laborum reprehenderit fugiat aute sunt pariatur cillum qui tempor quis proident elit.</p>
  <div class="cardWrapper">
    <img src="" alt="image placeholder" class="card">
    <img src="" alt="image placeholder" class="card">
    <img src="" alt="image placeholder" class="card">

Problem :

quick question.
I’m trying to blur a whole section on click, but I want a div inside that section to not be blurred with it.

I tried to change the properties of the div with, important and .setProperty with JS, but no luck.

const handleClickCard = e => {
    const $currentCard = e.currentTarget;
    const $cardDiv = document.querySelector('.card1');
    const $bg = document.querySelector('.overleven');

    if ($ === '1') {
      $ = 'initial';
      $ = 'blur(10px)';
      $'filter', 'none', 'important');
<section class="overleven">
    <div class="overleven--wrapper">
      <p class="overleven--info overleven--info--title">Er zijn veel potentiƫle dreigingen tijdens hun trektocht naar het zuiden, dus moeten ze altijd alert blijven.</p>
      <p class="overleven--info overleven--info--subtitle">Klik op een vuurkaart om een bedreiging te onthullen.</p>
    <div class="cards">
      <img data-id="1" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
      <img data-id="2" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
      <img data-id="3" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
  <div class="card1">
  <div class="card2"></div>
  <div class="card3"></div>



Comment posted by Shiny

Where is

Comment posted by Arthur Robaeys

in an

Comment posted by Arthur Robaeys

Thanks for the answer, could you guide me on how to translate this to a javascript scenario? Can I select the same way in Javascript as you showed me?

Comment posted by

You could do something like