Hover event not working with biggest z-index - css

Question

I have a gallery item with some image in its body. It has to display MORE link in the center of the body when I hover over gallery item (which works just fine) and display 0.5 opacity when I hover over MORE link. Even though z-index is bigger than parent's, for some reason :hover event simply does not fire. Any clue on how to fix this? My cursor: pointer also does not work.
HTML:
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
CSS:
._absolute-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
margin-top: 4em;
width: 90%;
}
.gallery-item__footer {
font-size: 1.6rem;
margin-top: 1em;
width: 100%;
border: 1px solid black;
text-align: center;
border-radius: 35px;
padding: .5em 0;
letter-spacing: 2px;
background-color: white;
transition: background-color .3s, color .3s;
}
.gallery__item {
position: relative;
width: 30%;
max-width: 600px;
}
.gallery-item__more-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
transition: background-color .3s;
border-radius: 35px;
z-index: 2;
}
.gallery-item__link {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
z-index: 4;
}
.gallery-item-more {
position: relative;
z-index: 1000000000;
width: 50%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
transition: background-color .3s;
color: black;
font-weight: bold;
letter-spacing: 1px;
padding: 1em 0;
border-radius: 35px;
text-align: center;
cursor: pointer;
}
.gallery-item-more:hover {
background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
background-color: black;
color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
opacity: 1;
}
.gallery-item__body {
width: 100%;
position: relative;
}
._flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__img {
object-position: top;
height: 25vw;
width: 100%;
border-radius: 35px;
}

Answer 1

Move the image before the more-button and it should work: Codepen
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>