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

nexus4
February 9, 2024
216 views
0 votes
2 Answers

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>

Answers

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>

You don’t need to change the HTML, but you do need to separate the border from the rest so that not all the contents get blurred.

This snippet does this by putting the border on a pseudo before element which gets blurred on hover of item, as do any contents of item apart from the Code p element.

#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;
  position: relative;
}

.item::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border: 5px solid blue;
  background-color: #ea342300;
  z-index: -1;
}

.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 {
  box-shadow: 1px 1px 20px 0px blue
}

.item:hover>*:not(.codeCheck) {
  z-index: 0;
  filter: blur(3px);
  ;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers