::将内容放入无花果之前，有什么方法可以避免这种情况？

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>