悬停出现在图像后面

Question

所以，我有这段代码：

    <section class="hero-cover">

      <div class="hero-text text-white">
            <p><h6>Memória Lage</h6><p>
            <p><h3>Parque Lage's history memorial</h3><p>
            <a href="project-eav.html"><button class="hero-button button-white"><h3>View Project</h3></a></button></p>
      </div>    

      <div class="hero-image eav-image revealOnScroll">
        <img src="images/hero-eav-cartaz.png" alt="">
      </div>

</section> 

我试图将鼠标添加到整个部分，如下所示：

.hero-cover {
  position: relative;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;

}

 .hero-cover:hover, .hero-cover:hover img {
   background-color: rgba(0, 0, 0, .9);
   transition: all .3s ease;
   -moz-transition: all .3s ease;
   -webkit-transition: all .3s ease;
   -o-transition: all .3s ease;
   z-index: 1000;
 }

但它出现在图像和文字后面。我在这做错了什么？ 提前谢谢。