JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 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>

CSS

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