Is there a way I can apply blur to everything except what my mouse is hovering over?

Question

So I have this function where I can hover the mouse over a small div and it enlarges with more info about the topic at hand. I am wondering if I can apply some blur to the rest of the page and just not the div that I am looking at. any help would be awesome!

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width:260px;
  height:260px;
  text-align: center;
  border-radius: 5%;
  margin:50px;
  padding:0;
  float:left;
  transition: all 0.4s ease-in-out;
}
.skill-category-card:hover {
  margin:30px;
  width:300px;
  height:300px;
}

<!-- The divs I want to hover over -->

<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Please provide the code you have thus far so we may get a better understanding of what you're wanting. — EGC, Jan 13 '20 at 00:16
@EGC added some code.Simply looking to apply a blur to everything around those divs. Without, of course, affecting the divs. — , Jan 13 '20 at 00:24
start here: https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover — A. Meshu, Jan 13 '20 at 00:50

score 0 · Answer 1 · answered Jan 13 '20 at 00:56

I tested it with firefox but this CSS actually do what you want....

.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width:260px;
  height:260px;
  text-align: center;
  border-radius: 5%;
  margin:50px;
  padding:0;
  float:left;
  transition: all 0.4s ease-in-out;
}
body:hover {
  background: yellow;
}
.skill-category-card:hover {
transform: scale(1.5,1.5);
background: white;
}

<body>
<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Note: i changed the hover effect to transform.

score 0 · Accepted Answer · answered Jan 13 '20 at 01:09

So, a small restructure of your HTML is required to implement Hover on “Everything But”.

A wrapper container class is required to detect a hover, and then subsequently blur everything that is :not :hover-ed upon.

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width: 260px;
  height: 260px;
  text-align: center;
  border-radius: 5%;
  margin: 50px;
  padding: 0;
  float: left;
  transition: all 0.4s ease-in-out;
}

.skill-category-card:hover {
  margin: 30px;
  width: 300px;
  height: 300px;
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

<!-- The divs I want to hover over -->

<div class="container">
  <div class="skill-category-card" id="web-des-skills">
    <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3>Web Design</h3>
  </div>
  <div class="skill-category-card" id="web-dev-skills">
    <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Web Development</h3>
  </div>
  <div class="skill-category-card" id="gfx-skills">
    <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Graphic<br />Design</h3>
  </div>
  <div class="skill-category-card" id="sfx-skills">
    <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Sound<br />Design</h3>
  </div>
</div>

The notable piece of CSS code is as follows:

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

Essentially what this does:

If the outer container is hover-ed over (.container:hover)
For all child elements (> *)
Which are not hover-ed over (:not(:hover))
Perform blur (filter: blur(8px) and -webkit-filter: blur(8px))

See the JSFiddle for reference.

Let me know how you go with this!

score 0 · Answer 3 · answered Jan 13 '20 at 02:43

If you wanted jquery, html, and css to blur the rest of the page.

     $( ".test" ).on({
          click: function() {
            $( this ).toggleClass( "div.test" );
          }, mouseenter: function() {
            $( this ).addClass( "inside" );    
          }, mouseleave: function() {
            $( this ).removeClass( "inside" );
          }
        });

    .skill-category-card{
     position: relative;
     z-index: 2;
     background-color: rgba(68, 79, 83, 0.68);
     width:260px;
     height:260px;
     text-align: center;
     border-radius: 5%;
     margin:50px;
     padding:0;
     float:left;
     transition: all 0.4s ease-in-out;
}
 .skill-category-card:hover {
     position:relative;
     z-index: 2;
     margin:30px;
     width:300px;
     height:300px;
}
 .test {
     position: absolute;
     z-index: 1!important ;
     width:1000px;
     height:3000px;
     color: #000;
     padding: .5em;
     border: 1px solid #444;
}
 .inside {
     z-index: 1 ;
     background-color:rgba(0, 0, 0, 0.5);
     filter: blur(1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The divs I want to hover over -->
<div class= "test">If you hover here blurs and overlays.</div>
<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Is there a way I can apply blur to everything except what my mouse is hovering over?

3 Answers3