<!--CSS Blur Effect Boxes On Hover by @css_coder -->

<div class="box-wrap">
  <div class="box">
    <p>I</p>
  </div>
    <div class="box">
    <p>LOVE</p>
  </div>
      <div class="box">
    <p>CSS</p>
  </div>

body {
  font-weight: bold;
  font-size: 50px;
  text-align: center;
}

.box-wrap {
  display: flex;
  margin: 10%;
  align-items: center;
  justify-content: center;
}

.box {
  padding: 80px;
  margin: 2%;
  background: tomato;
  width: 30%;
  box-shadow: 0 0 10px rgba(0, 0, 0.4);
  border-radius: 8px;
  transition: 0.2s all;
}

.box-wrap:hover .box {
  filter: blur(3px); opacity: 0.5;
  transform: scale(0.98);
  box-shadow: none;
}

.box-wrap:hover .box:hover {
  transform: scale(1);
  filter: blur(0px); opacity: 1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0;8);
}