I want to put the effect of the hover only on 1 element however 2 element was applied

Question

Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.

.Aljon { /* This is an image */
  width: 484px;
  height: 612px;
  position: absolute;
  left: 65%;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-image: url(../Resources/Aljon.png);
  animation: aljon-load 300ms ease 200ms;
  transform: translateY(150%);
  animation-fill-mode: forwards;
  transition: 1s ease;
  z-index: 2;
}

@keyframes aljon-load {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateX(0);
  }
}

#myBtn {
  background-color: #ffffff;
  border: none;
  color: rgb(2, 2, 2);
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: Arial Rounded MT;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  left: 500px;
  top: 400px;
  position: relative;
  transition: 0.3s ease-in-out;
  z-index: 3;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
  left: 200px;
  transition: 0.3s ease-in-out;
}
.Aljon:hover {
  filter: blur(8px);
}
.container:hover .Aljon {
  opacity: 1;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div> 
</div>

Frenchy · Answer 1 · 2020-12-17T12:05:28.010

You have to put blur 0px on other classes:

.Aljon { /* This is an image */
  width: 484px;
  height: 612px;
  position: absolute;
  left: 65%;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-image: url(../Resources/Aljon.png);
  animation: aljon-load 300ms ease 200ms;
  transform: translateY(150%);
  animation-fill-mode: forwards;
  transition: 1s ease;
  z-index: 2;
}

@keyframes aljon-load {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateX(0);
  }
}

#myBtn {
  background-color: #ffffff;
  border: none;
  color: rgb(2, 2, 2);
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: Arial Rounded MT;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  left: 500px;
  top: 400px;
  position: relative;
  transition: 0.3s ease-in-out;
  z-index: 3;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
  left: 200px;
  transition: 0.3s ease-in-out;
  filter: blur(0px);
}
.Aljon:hover {
  filter: blur(8px);
}
.container:hover .Aljon {
  opacity: 1;
  transition: 0.3s ease-in-out;
  cursor: pointer;
   filter: blur(0px);
}

<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div> 
</div>

Thank you. However the image is not blurring. I need only the image will blur not the button. — AR OFFICIAL TV, Dec 17 '20 at 09:28
so if you want to have image blrred and keep button blur off you have to change your html code.. use 2 containers one for background and other for children (button).. see https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image — Frenchy, Dec 17 '20 at 12:04
Thank you. You mean 2 container for the 1 parent container for image(child) and another container(parent) for the button? Or should I put them in 1 container to be a child and siblings? — AR OFFICIAL TV, Dec 17 '20 at 13:48
yes you have to separate what is blurred from what is not blurred sorry for my english — Frenchy, Dec 17 '20 at 15:20

score 0 · Accepted Answer · answered Dec 17 '20 at 14:21

Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.

.Aljon {
  width: 484px;
  height: 612px;
  position: absolute;
  left: 65%;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-image: url(../Resources/Aljon.png);
  animation: aljon-load 300ms ease 200ms;
  transform: translateY(150%);
  animation-fill-mode: forwards;
  transition: 1s ease;
  z-index: 4;
}

@keyframes aljon-load {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateX(0);
  }
}

#myBtn {
  background-color: #ffffff;
  border: none;
  color: rgb(2, 2, 2);
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial Rounded MT;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  left: 1500px;
  top: 400px;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 4;
  transition: 0.3s ease;
}

.Aljon:hover ~ #myBtn {
  left: 1010px;
  transition: 0.3s ease;
}
#myBtn:hover {
  left: 1010px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.container:hover .Aljon {
  filter: blur(2px);
}

<div class="container">
<div class="Aljon">
</div> 
<button id="myBtn" class="button">HIRE ME</button>
</div>

I want to put the effect of the hover only on 1 element however 2 element was applied

2 Answers2