I just wanted the button to be on top of "background: linear-gradient" without "background: linear-gradient" when hovering and I am not able to solve the problem for some reason maybe need a little help

demo: https://jsfiddle.net/qgj18a4b/

<div >
   <img style="object-fit: cover; width:350px; height:250px;" src="https://st.depositphotos.com/1224365/2498/i/950/depositphotos_24980235-stock-photo-portrait-of-a-normal-man.jpg" alt="">
   <button type="button" >Read More</button>
   <div >MISSÃO E OBJETIVOS</div>
</div>

  .image {
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
  }
  
  .image::after{
    content:"";
    position:absolute;
    background: linear-gradient(0deg,        rgba(39,38,42,1) 0%, rgba(255,255,255,0)     60%);
    z-index:2;
    height:100%;
    width:100%;
    top:0;
    left:0;
  }
  
 .image:hover .qualquer {                          
    top: 50%;
  }
  
 .image:hover .mybuttonoverlap{ 
    display:block;
  }
  
  .mybuttonoverlap{
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 30px;
    top: 190px;
    display: none;
  }
   
   .qualquer {
    position: absolute;
      width: 325px;
      top: 87%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      color: #ffffff;
      text-align: center;
  }


                      


                      

                      

CodePudding user response：

Assign a greater z-index than the z-index assigned to .image::after (which is 2)

button {
  z-index: 3;
}

jsfiddle