Can't interact with button due to overlapping div?

Question

I have a problem where I can't interact with a button because of overlapping div's I suspect. I've looked at the other posts by people who have had similar problems, but the answers haven't helped me.

.hero-container {
  background-color: rgb(30, 30, 30);
  width: 100%;
  height: var('.hero-img');
  position: relative;
  top: 80px;
  z-index: -20;
}

.hero-img {
  width: 100%;
  position: relative;
  z-index: -10;
  opacity: 20%;
  user-select: none;
}

.hero-center-elements {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  z-index: 10;
}

.hero-text {
  color: white;
}

.hero-button {
  transition: 0.3s;
  width: 170px;
  height: 60px;
  font-size: 20px;
  background-color: rgb(28, 32, 76);
  border: 0;
  margin-top: 40px;
  border-radius: 20px;
}

.hero-button:hover {
  background-color: aqua;
}

<div id='hero' className='hero-container'>
  <img className={ 'hero-img'} src={hero} />
  <div className='hero-center-elements'>
    <h1 className='hero-text-main hero-text'>Tagline Part 1,<br />Tagline Part 2</h1>
    <h2 className='hero-text-sub hero-text'>Description thing</h2>
    <h2 className='hero-text-question hero-text'>Ready to get started?</h2>
    <button className='hero-button hero-text'>Contact Us!</button>
  </div>
</div>
</div>

As you can see I'm trying to make a transition on the hover - but this isn't working. I've also tried setting the z-index of the button to 1000 but this hasn't helped either. I'm not sure what else to do?

Thanks

Answer 1

Its working properly. Why you adding className instead of class?

.hero-container {
  background-color: rgb(30, 30, 30);
  width: 100%;
  height: var('.hero-img');
  position: relative;
  top: 80px;
  z-index: -20;
}

.hero-img {
  width: 100%;
  position: relative;
  z-index: -10;
  opacity: 20%;
  user-select: none;
}

.hero-center-elements {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  z-index: 10;
}

.hero-text {
  color: white;
}

.hero-button {
  transition: 0.3s;
  width: 170px;
  height: 60px;
  font-size: 20px;
  background-color: rgb(28, 32, 76);
  border: 0;
  margin-top: 40px;
  border-radius: 20px;
}

.hero-button:hover {
  background-color: aqua;
}

<div id='hero' className='hero-container'>
  <img class='hero-img' src='https://via.placeholder.com/800' />
  <div class='hero-center-elements'>
    <h1 class='hero-text-main hero-text'>Tagline Part 1,<br />Tagline Part 2</h1>
    <h2 class='hero-text-sub hero-text'>Description thing</h2>
    <h2 class='hero-text-question hero-text'>Ready to get started?</h2>
    <button class='hero-button hero-text'>Contact Us!</button>
  </div>
</div>
</div>