Blur affect not working for the elements above the "hovered" element

Question

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
.layer1{
    transition: 1s;
}

.layer2{
    transition : 1s;
}

.layer1:hover ~ .layer2 {
    filter: blur(10px)
}

.layer1:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,.8);
}

<h1 class="layer1 layer2">Using The transition Shorthand Property</h1>

<p class="layer1 layer2">Hover over the div element below, to see the transition effect:</p>

<div class="layer1 layer2"></div>

<p class="layer1 layer2"><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

<p class="layer1 layer2"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

codepen

I have multiple elements in a page, and i want to add blur affect. when i hover in the top element every other element is getting blurred(which is correct). But when i hover over the second element, the element above it is not getting blurred, but the elements below it is blurred.

Kindly provide me a solution for this problem.

I think you will need js for this since there is no previous sibling selector or parent selector in css. — AbbasEbadian, Aug 23 '20 at 10:50
@AbbasEbadian is right. The tilde selector (`~`) only selects siblings *after* an element, not before. — Daniel_Knights, Aug 23 '20 at 10:57
`.layer1:hover+.layer2 { filter: blur(10px) }` hope that's solve your problem. — Ahmad Dalao, Aug 23 '20 at 13:41

score 0 · Answer 1 · answered Aug 23 '20 at 11:04

I came up with a solution. Changed the classes and identifiers though.

Here is the HTML:

<div class=content>
<h1 class="element">Using The transition Shorthand Property</h1>
<p class="element">Hover over the div element below, to see the transition effect:</p>
<div id="widen" class="element"></div>

<p class="element"><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

<p class="element"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</div>

And the CSS:

    #widen {
    background: red;
    width: 100px;
    height: 100px;
    transition: width 2s linear 1s;
    }

    #widen:hover {
    width: 300px;
    }

    .element:hover, #widen:hover {
    transition: 1s;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .8);
    }

    .content:hover .element {
    filter: blur(5px);
    }

    .content .element:hover {
    filter: blur(0);
    }

Good idea, but we must make sure that our `.element`s should fit their parent.Otherwise hovering on any white space area will cause all elements to blur . — AbbasEbadian, Aug 23 '20 at 11:21
This is a potential solution. But I have used JS for this purpose. https://codepen.io/krish-barman/pen/ExKZgXN — Krish, Aug 23 '20 at 11:44

Blur affect not working for the elements above the "hovered" element

1 Answers1