blur everything but hovered CSS

by

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);
}

More Related Contents:

  1. How can I replace text with CSS?
  2. How to get div height to auto-adjust to background size?
  3. How to make button look like a link?
  4. Making an iframe responsive
  5. Child with max-height: 100% overflows parent
  6. Center a position:fixed element
  7. Is there a way to interpolate CSS variables with url()?
  8. Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
  9. My position: sticky element isn’t sticky when using flexbox
  10. What does @media screen and (max-width: 1024px) mean in CSS?
  11. Opacity of div’s background without affecting contained element in IE 8?
  12. z-index does not work in Internet Explorer with pdf in iframe
  13. CSS margin-top of affects parent’s margin
  14. In which direction do selector engines read, exactly?
  15. HTML not loading CSS file
  16. Add ellipses to overflowing text in SVG?
  17. Less lists as a mixin argument(s)
  18. Using attr to set css variable inline that work with CSP
  19. What is the difference between `margin` and `padding` in CSS?
  20. Can I apply a CSS transition to the overflow property?
  21. How to show the first N elements of a block and hide the others in css?
  22. word-wrap:break-word not working in IE8
  23. Width equal to content [duplicate]
  24. Align form elements in CSS
  25. How do I make text bold in HTML?
  26. How to skip first child?
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. Two css files defining same class
  29. How to use variable in CSS? [duplicate]
  30. Latest on CSS parent selector [duplicate]

Leave a Comment