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">
<div>Hey</div>
<div>Hallo</div>
<div>Gutentag</div>
</div>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 = e.target;
const textWrapper = document.querySelector('.textWrapper');
const cardWrapper = document.querySelector('.cardWrapper');
const allCards = cardWrapper.children;
if (clickedOn.parentElement === cardWrapper) {
textWrapper.style.filter = 'blur(10px)';
for (const element of allCards) {
clickedOn === element ? element.style.filter = 'none' : element.style.filter = 'blur(10px)'
}
} else {
textWrapper.style.filter = 'none';
for (const element of allCards) {
element.style.filter = '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>
<div class="cardWrapper">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
</div>
</section>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 ($currentCard.dataset.id === '1') {
$cardDiv.style.display = 'initial';
$bg.style.filter = 'blur(10px)';
$cardDiv.style.setProperty('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>
<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>
<div class="card1">
</div>
<div class="card2"></div>
<div class="card3"></div>
</section>
Where is
in an
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?
You could do something like