I'm having trouble getting the button to overlay on top of "background: linear-gradient" without the background disappearing when hovered. Any assistance would be greatly appreciated.
demo: https://jsfiddle.net/qgj18a4b/
<div class="image">
<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" class="mybuttonoverlap btn btn-info">Read More</button>
<div class="qualquer">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;
}