blur everything but hovered CSS

Question

I have three "cards", three separate divs. I'm trying to make it so that if I hover over one of the "cards" the other two will blur, but only when one is being hovered over.

Here's a codepen example: https://codepen.io/jacobkjones/pen/gXqpeB

I know how to do the blurring, but I don't know how to make it to where box2 and box3 will blur whenever I hover over box1. I'm not even sure if this is possible with just CSS, but I'd prefer for it to be done without JS.

I've tried using multiple CSS selectors such as , ~ + but none of them give the desired result.

Any help is much appreciated.

You should add your code into your question. You can add the Codepen link in addition to that, but don't try to get around the code requirement for posting a question by just posting your link as fake code. Probably why you're getting downvoted. — cjl750, Dec 02 '17 at 02:28
I can't edit your post because of outstanding edit requests, but please add your code to your question itself (Stack Overflow even has a built in sandbox that's very similar to CodePen). — Nick McCurdy, Dec 02 '17 at 02:34

bot19 · Answer 1 · 2019-06-17T05:49:10.747

Searched for this while I was trying to make this exact thing work. Turns out, it is possible to do with only CSS (contrary to the other answer). It works quite well too. I tested on my mac and it works in Chrome, Firefox, Safari, Edge (win 10), but not on IE11 (win 10).

.grid {
  display: flex;
}

.grid:hover .card {
  filter: blur(5px);
}

.card {
  padding: 10px;
  transition: all 0.2s ease-in-out;
}

.grid .card:hover {
  filter: blur(0);
}

<div class="grid">
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 1">
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 2">
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 3">
  </div>
</div>

Or, just add this to your CSS (see it in your example codepen).

.container:hover .card {
  filter: blur(5px);
}

.container .card:hover {
  filter: blur(0);
}

score 1 · Answer 2 · answered Dec 02 '17 at 02:59

You're not gonna be able to pull this off with only CSS. That's because there's no previous sibling selector in CSS.

So given this markup:

<div class="container">
  <div id="box1" class="card">
    <h1>one</h1>
    <p>some text here</p>
  </div>
  <div id="box2" class="card">
    <h1>two</h1>
    <p>some text here</p></div>
  <div id="box3" class="card">
    <h1>three</h1>
    <p>some text here</p></div>
</div>

You could select #box2 and #box3 when hovering #box1 with a selector like this:

div[id^="box"]:hover  ~ div[id^="box"] {
  //blurry stuff
}

But what happens when you hover #box2 or #box3? You can't change the boxes before the one you hover.

We could try to think backwards and make things blurry by default and then do a simple :hover selector to unblur the one you're hovering. That way you end up with the ones you're not hovering blurred, but it's not what you want because the boxes aren't normal-looking when not hovering.

Here's a simple example of an approach that'd work using jQuery's .not(). You could use it to toggle a class to do the blurring instead of putting the CSS in the function, if you wanted.

$(function(){
  var boxes = $('div[id^="box"]');
  $(boxes).on('mouseenter', function(){
    $(boxes).not($(this)).css('background-color', 'red');
  }).on('mouseleave', function(){
    $(boxes).css('background-color', 'initial');
  });;
});

.container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.card {
  border: solid black 1px;
  padding: 20px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="box1" class="card">
    <h1>one</h1>
    <p>some text here</p>
  </div>
  <div id="box2" class="card">
    <h1>two</h1>
    <p>some text here</p></div>
  <div id="box3" class="card">
    <h1>three</h1>
    <p>some text here</p></div>
</div>

Final note: make sure to fix your header tags. For headers two and three, you have an <h1> opening tag but an </h2> closing tag.

blur everything but hovered CSS

2 Answers2