フレックスボックスホバー中にテキストの背景に文字が表示されない

Question

フレックスボックスにコードを設定すると（画像1）、フレキシブルにコードが表示され、色付きのオーバーレイとテキストが表示されます。問題は、テキストが色付きオーバーレイの下に表示されていて、上に表示されることです（画像2）。私はZ-インデックスを変更しようとしましたが、それは何らかの理由でオーバーレイを隠すだけです。私のコードは以下の通りです。

* { 
 
    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

私は、テキストフレックスを保持する容器を作りました。 h1をフレックスにする必要はありません。容器は、それを中心に置くか、または周囲を動かす。

* { 
 
    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>

以下のコードを参照してください。