want element to be visible in a blur element in the back

Question

How can I apply a blur effect to only one element when hovered while keeping another element unaffected? The CSS configuration involves setting the filter: blur(3px); property to the parent element (.item) on hover, while ensuring the child element (.codeCheck) remains unaffected.

I tried defining a style rule for the hover state of the parent element (.item) and removing the blur effect for the child element (.codeCheck) within that rule but nothing

#projectDiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 30px;
  width: 100%;
  height: fit-content;
}

.item {
  z-index: 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 400px;
  width: 250px;
  border: 5px solid blue;
  background-color: #ea342300;
}

.item img {
  margin: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
}

.item p {
  color: blue;
  font-size: 14px;
  font-family: 'kabeteh';
  font-weight: bolder;
  margin: 0;
  padding: 10px;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.codeCheck {
  position: absolute;
  left: 170px;
  visibility: hidden;
  display: none;
  background-color: white;
  transition: transform .5s ease;
}

.codeCheck a {
  padding: 5px;
  background-color: white;
  text-orientation: upright;
  writing-mode: vertical-lr;
  text-decoration: none;
  font-family: 'secondFont';
}

.item:hover {
  z-index: 0;
  filter: blur(3px);
  box-shadow: 1px 1px 20px 0px blue;
}

.item:hover .codeCheck {
  z-index: 9;
  transform: translateY(10%);
  display: block;
  visibility: visible;
}

<div class="item">
  <p id="codeCheck3" class="codeCheck"> <a href="#">Code</a> </p>
</div>

Answer 1

The blur affects both the parent and children, so you must separate the effect and the content. In this example code, I wrapped both elements in a parent that no longer contains the border. The first element is now responsible for the border and blur effect. It can also contain any other content you might want to blur. I used relative positioning, but you can do it in a different way.

#projectDiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 30px;
  width: 100%;
  height: fit-content;
}

.item {
  position: relative;
  z-index: 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 400px;
  width: 250px;
}

.item img {
  margin: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
}

.item p {
  color: blue;
  font-size: 14px;
  font-family: 'kabeteh';
  font-weight: bolder;
  margin: 0;
  padding: 10px;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rect {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  flex-direction: column;
  justify-content: flex-start;
  height: 400px;
  width: 250px;
  border: 5px solid blue;
  background-color: #ea342300;
}

.codeCheck {
  position: absolute;
  left: 170px;
  visibility: hidden;
  display: none;
  background-color: white;
  transition: transform .5s ease;
}

.codeCheck a {
  padding: 5px;
  background-color: white;
  text-orientation: upright;
  writing-mode: vertical-lr;
  text-decoration: none;
  font-family: 'secondFont';
}

.item:hover .rect {
  z-index: 0;
  filter: blur(3px);
  box-shadow: 1px 1px 20px 0px blue;
}

.item:hover .codeCheck {
  z-index: 9;
  transform: translateY(10%);
  display: block;
  visibility: visible;
}

<div class="item">
  <div class="rect"></div>
  <p id="codeCheck3" class="codeCheck"> <a href="#">Code</a> </p>
</div>