when hovering over a div the button does not change transparency

Question

I need to make when hovering over a div with an image, there is black background with opacity and when hovering over the button, it changes its values. I got the following:

.promo__girl {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/r0rnSP0/1.png');
  position: absolute;
  width: 300px;
  height: 300px;
  margin-top: 136px;
  right: 7.469rem;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo__girl-image {
  width: 100%;
}

.promo__girl-hover {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo__girl .button_yellow {
  font-size: 16px;
  color: #162E3C;
  background-color: #DDF0A7;
  border: 2px solid #DDF0A7;
  text-align: center;
  margin-top: 10px;
  border-radius: 64px;
  margin-right: 4px;
  height: 52px;
  width: 233px;
  z-index: 1;
}

.promo__girl .button_yellow:hover {
  width: 233px;
  background-color: inherit;
  color: white;
  border-color: white;
  opacity: 1;
}

.promo__girl-hover:hover {
  background-color: black;
  opacity: 0.7;
  transition: 0.5s;
}

<div class="promo__girl">
  <div class="promo__girl-hover"><button class="button_yellow">Watch Introduction</button></div>
</div>

So now when i hovering image, opacity applies to button to, but i donr need it. Maybe someone will help me? Maybe you can do this with display:none or visibility: hidden/visible? I tried it but there is 0 result.

This question is asking how to avoid applying the opacity style to a child when the opacity of its parent is changed. It is not asking "How to affect other elements when one element is hovered". The idea that comes to mind for me, @MORVWY, is to make the child a sibling instead, that way it is not affected by the opacity of the parent — async await, Jul 08 '22 at 21:16

score 1 · Accepted Answer · answered Jul 08 '22 at 21:22

You can't override parent opacity in a child. But you can use "another" element to be darker... the :after pseudo element. It works.

.promo__girl {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/r0rnSP0/1.png');
  position: absolute;
  width: 300px;
  height: 300px;
  margin-top: 136px;
  right: 7.469rem;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo__girl-image {
  width: 100%;
}

.promo__girl-hover {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo__girl .button_yellow {
  font-size: 16px;
  color: #162E3C;
  background-color: #DDF0A7;
  border: 2px solid #DDF0A7;
  text-align: center;
  margin-top: 10px;
  border-radius: 64px;
  margin-right: 4px;
  height: 52px;
  width: 233px;
  z-index: 1;
}

.promo__girl .button_yellow:hover {
  width: 233px;
  background-color: inherit;
  color: white;
  border-color: white;
  opacity: 1;
}

.promo__girl-hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0;
  transition: 0.5s;
  pointer-events: none;
}

.promo__girl-hover:hover:after {
  opacity: 0.7;
  transition: 0.5s;
}

<div class="promo__girl">
  <div class="promo__girl-hover">
    <button class="button_yellow">Watch Introduction</button>
  </div>
</div>

when hovering over a div the button does not change transparency

1 Answers1