when hovering over a div the button does not change transparency

user_19513142 0
Viewed 28

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.

css html
1 Answers

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>

user_38073650
Related