::將內容放入無花果之前，有什麼方法可以避免這種情況？

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），但沒有任何辦法來避免我的櫃檯現身在無花果。

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元素內部，但是在數字元素內部如預期的那樣。我爲before元素添加了一個懸停狀態，以便與文本同時淡出，所以它看起來像您想要的那樣行事。

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>