Mon texte est caché derrière un arrière-plan pendant le vol stationnaire de flexbox

Question

J'ai un code de flexbox mis en place (Image 1) pour fléchir lorsque je survolais et afficher une superposition colorée et du texte dessus. Le problème est que le texte est affiché sous la superposition colorée et je voudrais qu'il soit sur le dessus (Image 2). J'ai essayé de changer l'index z mais cela ne ferait que cacher la superposition pour une raison quelconque. Mes codes sont ci-dessous.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.absolute-bg { 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-position: 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
#Text { 
 
    display: none; 
 
    z-index: 2; 
 
} 
 

 
.home-mast__container>*:hover #Text { 
 
    background-color: black; 
 
    margin-bottom: -90%; 
 
    display: flex; 
 
    text-align: right; 
 
    color: white; 
 
    margin-top: 50%; 
 
    z-index: 1; 
 
    font-size: 80px; 
 
    justify-content: center 
 
} 
 

 
.home-mast { 
 
    height: 100vh; 
 
} 
 

 
.home-mast__container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    height: 100%; 
 
} 
 

 
.home-mast__container>* { 
 
    position: relative; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    padding: 1em; 
 
    -webkit-transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, - - webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit- box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit- box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -ms-flex-positive 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
} 
 

 
.home-mast__container>*:hover { 
 
    -webkit-box-flex: 3; 
 
    -ms-flex-positive: 3; 
 
    flex-grow: 3; 
 
} 
 

 
.home-mast__container>*:nth-child(1):after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    background-color: #ff2400; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.4s ease-in-out; 
 
    transition: opacity 0.4s ease-in-out; 
 
} 
 

 
.home-mast__container>*:nth-child(1):hover:after { 
 
    opacity: 0.65; 
 
    -webkit-transition-delay: 0.6s; 
 
    transition-delay: 0.6s; 
 
}

<div class="home-mast__container"> 
 
    <a href="http://23348472.nhd.weebly.com/ebenezer-tucker.html"> 
 
    <div> 
 
     <div class="absolute-bg" style="background-image:url('http://23348472.nhd.weebly.com/uploads/9/9/7/3/99738320/eb-tuck_1_orig.png');"> 
 
     <h2 id="Text">Ebenezer Tucker</h2> 
 
     </div> 
 
    </div> 
 
    </a>

Answer 1

I fait récipient contenant le flex texte. Pas besoin de faire du h1 un flex. Le conteneur le centrerait ou le déplacerait. Voir ci-dessous le code

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
margin: 0; 
 

 
} 
 

 
.absolute-bg { 
 
z-index: -1; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
z-index: 0; 
 
height: 100%; 
 
width: 100%; 
 
background-position: 50%; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 

 
#Text{ 
 
display: none; 
 
z-index: 2; 
 

 
} 
 

 
.home-mast__container > *:hover #Text{ 
 
background-color: black; 
 
text-align: right; 
 
color: white; 
 
z-index: 1; 
 
font-size: 80px; 
 
display: block 
 
} 
 

 
.home-mast { 
 
height: 100vh; 
 

 
} 
 

 
.home-mast__container { 
 
display: -webkit-box; 
 
display: -ms-flexbox; 
 
display: flex; 
 
height: 100%; 
 

 
} 
 
.home-mast__container > * { 
 
position: relative; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
     flex-grow: 1; 
 
padding: 1em; 
 
    -webkit-transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,        - - webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-  box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-  box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -ms-flex-positive 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; 
 
} 
 
.home-mast__container > *:hover { 
 
    -webkit-box-flex: 3; 
 
    -ms-flex-positive: 3; 
 
     flex-grow: 3; 
 

 

 
} 
 
.home-mast__container > *:nth-child(1):after { 
 
content: ""; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
z-index: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
color: white; 
 
background-color: #ff2400; 
 
opacity: 0; 
 
-webkit-transition: opacity 0.4s ease-in-out; 
 
    transition: opacity 0.4s ease-in-out; 
 
    } 
 

 
.home-mast__container > *:nth-child(1):hover:after { 
 
    opacity: 0.65; 
 
    -webkit-transition-delay: 0.6s; 
 
     transition-delay: 0.6s; 
 
    }

<div class="home-mast"> 
 
<div class="home-mast__container"> 
 
<a href="http://23348472.nhd.weebly.com/ebenezer-tucker.html"> 
 
    <div> 
 
    <div class="absolute-bg" style="background-image:url('http://23348472.nhd.weebly.com/uploads/9/9/7/3/99738320/eb-tuck_1_orig.png');"> 
 
    <h2 id="Text">Ebenezer Tucker</h2> 
 
    </div> 
 
    </div> 
 
    </a> 
 
    </div> 
 
</div>