:not selector not working

HTML-CSS
1

I want to create a hovering effect where the background goes blurred but the text remains unblurred

<html>
 
  <body>
    <div class="cont">
      <div class="block">
        <h1>power</h1>
      </div>
    </div>
  </body>
  
</html>
//--------------------------------------//
body{
  margin:0;
  padding:10px;
  box-sizing:border-box;
   background-color:#2E4053;
}
.cont{
  display:flex;
  justify-content:center;
  height:100vh;
  align-items:center;
}
.block{
 background-color:#F4D03F;
  height:250px;
  width:330px;
  border-radius:10px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.block:hover :not(:hover){
  filter:blur(2px);
}
2

You are blurring the parent container of the h1, you can’t say “not blur h1”.

One option is to give the elements a container and position the h1 over the blurred box.
https://codepen.io/anon/pen/KjwaKX

4

It was in the original CSS, I just left it in. I only renamed the class from block to blur-block. It doesn’t even need to be a flex container now, I just didn’t remove anything.

6

Not that it really matters, but I didn’t update the color property.

If you mean the formatting of the hex code then that is just Codepen that does that automatically when you use the Tidy function.