::コンテンツをfigcaptionの中に入れる前に、これを避ける方法はありますか？

Question

画像は、画像と同じサイズの灰色のボックス（数字付き）で隠されています。ホバリングするとグレーが消えて画像が表示され、しばらくすると画像の上にテキストがフェードインします。

「ボックス」のフェードアウトを書き込む前に、テキストのフェードインを書き始めました。しかし、箱の内容（図）は、figcaptionタグの中に入れられ、原則としてスタイリングされます。なぜこれが起こり、問題の周りに道があるのですか？

ここにコードの関連部分を示します。

section figure { 
 
    counter-increment: numImg; 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
section figure::before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    content: counter(numImg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    font-size: 2rem; 
 
    color: #0e533e; 
 
    width: 200px; 
 
    height: 200px; 
 
    z-index: 3; 
 
    line-height: 200px; 
 
    text-align: center; 
 
} 
 

 
section figure:hover figcaption { 
 
    transition: opacity .7s ease-in-out; 
 
    opacity: 1; 
 
} 
 

 
section figure figcaption { 
 
    text-shadow: 0px 0px 2px white; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    align-content: center; 
 
    width: 200px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: -0px; 
 
    opacity: 0; 
 
}

<section> 
 
    <figure> 
 
    <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt=""> 
 
    <figcaption>Text that should fade in</figcaption> 
 
    </figure> 
 
</section>

私がこれまでに見つけた唯一のものは、表示されるまで、私のカウンターを避けるためにどのような方法（つまりfigcaptionで）不透明度は、コンテナ内のすべてのものに影響を与えることがあるが、ないfigmaptionのにある。

Answer 1

これはあなたが心に留めていることですか？

あなたはより多くのテキストを遅らせたい場合は、transition-delayの値を微調整することができます -

section figure:hover figcaption { 
    top: 0%; 
    transition: top .7s ease-out; 
    -webkit-transition-delay: .3s; /* Safari */ /* tweek this */ 
    transition-delay: .3s; /* tweek this */ 
} 

section figure { 
 
    counter-increment: numImg; 
 
    display: flex; 
 
    position: relative; 
 
    overflow:hidden; 
 
} 
 

 
section figure::before { 
 
    background: rgba(105, 105, 105, 0.68); 
 
    content: counter(numImg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    font-size: 2rem; 
 
    color: #0e533e; 
 
    width: 200px; 
 
    height: 200px; 
 
    z-index: 3; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    opacity:1; 
 
    transition: opacity .2s ease-in-out; 
 
} 
 

 
section figure:hover figcaption { 
 
    top: 0%; 
 
    transition: top .7s ease-out; 
 
    -webkit-transition-delay: .3s; /* Safari */ 
 
    transition-delay: .3s; 
 
} 
 
section figure:hover::before{ 
 
    opacity:0; 
 
} 
 
section figure figcaption { 
 
    text-shadow: 0px 0px 2px white; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    align-content: center; 
 
    width: 200px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: -100%; 
 
}

<section> 
 
    <figure> 
 
    <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt=""> 
 
    <figcaption>Text that should fade in</figcaption> 
 
    </figure> 
 
</section>

Answer 2

は、私の知る限り言うことができるように、オブジェクトの前に擬似が表示されていませんでしたfigcaption要素の内側では、Figure要素の内側にあります。前の要素がテキストと同時にフェードアウトするためのホバー状態を追加しましたので、必要に応じて動作しているようです。

section figure { 
 
    counter-increment: numImg; 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
section figure:before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    content: counter(numImg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    font-size: 2rem; 
 
    color: #0e533e; 
 
    width: 200px; 
 
    height: 200px; 
 
    z-index: 3; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    transition: opacity .7s ease-in-out; 
 
    opacity: 1; 
 
} 
 

 
section figure figcaption { 
 
    text-shadow: 0px 0px 2px white; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    align-content: center; 
 
    width: 200px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: -0px; 
 
    opacity: 0; 
 
    transition: opacity .7s ease-in-out; 
 
} 
 

 
section figure:hover:before { 
 
    opacity: 0; 
 
} 
 

 
section figure:hover figcaption { 
 
    opacity: 1; 
 
}

<section> 
 
    <figure> 
 
    <img src="https://placehold.it/200/1E5799/ffffff" alt="FPO"> 
 
    <figcaption>Text that should fade in</figcaption> 
 
    </figure> 
 
</section>