如何将叠加层悬停在flex容器中的flex项目上

Question

这是我的代码。我想在每个flexItem的内容上放置灰色覆盖。图层也必须在图像上方。我找不到解决方案，任何人都有一些想法？

我尝试在flexCont上的相对位置，并在flex项目重叠但绝对无关。

我有js中的函数在悬停时应用覆盖类，如果你不悬停更多，则删除它

$('.flexItem').hover(
        function() {
            $(this).addClass( 'overlay' );
            console.log('hover')
          }, function() {
          $(this).removeClass( 'overlay' ); 
            console.log('no hover')
          }
    );

.flexCont{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
	display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
}
.overlay{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
z-index:999!important;
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}

.flexItemV1{

}
.flexItemV2{
    
}

.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>

Answer 1

另一答案