:: avant que le contenu soit placé dans une figcaption, y a-t-il un moyen d'éviter cela?

Question

Une image est masquée par une boîte grise (avec un nombre) de la même taille que l'image. En survolant, le gris s'estompe et révèle l'image, et après un certain temps un texte s'estompe au-dessus de l'image.

J'ai commencé en arrière, en écrivant le fade-in pour le texte avant que j'écrive le fondu de la "boîte". Cependant, le contenu de la boîte (la figure) est placé à l'intérieur de la balise figcaption, et stylé comme sa règle. Pourquoi cela arrive-t-il et y a-t-il un moyen de contourner mon problème?

Voici les parties pertinentes du code.

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>

La seule chose que j'ai trouvé est à ce jour que l'opacité affecte tout dans un récipient (qui est, en figcaption), mais pas moyen d'éviter mon compteur à apparaître en la figcaption.

Answer 1

Est-ce que c'est ce que vous avez en tête?

Si vous voulez retarder le texte plus vous pouvez modifier la valeur de 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

Pour autant que je sache, le pseudo devant un objet n'apparaissait à l'intérieur de l'élément figcaption, mais à l'intérieur de l'élément figure comme prévu. J'ai ajouté un état hover pour que l'élément before disparaisse en même temps que votre texte, il semble donc se comporter comme vous le souhaitez.

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>