:: bevor Inhalte in eine figcaption eingefügt werden, gibt es eine Möglichkeit, dies zu vermeiden?

Question

Ein Bild wird durch ein graues Kästchen (mit einer Nummer) in derselben Größe wie das Bild verdeckt. Wenn Sie den Mauszeiger über das Bild bewegen, wird das Bild eingeblendet und das Bild wird eingeblendet. Nach einer Weile wird ein Text über dem Bild eingeblendet.

Ich begann rückwärts, schrieb die Einblendung für den Text, bevor ich das Ausblenden der "Box" schrieb. Der Inhalt der Box (die Figur) wird jedoch in das figcaption-Tag eingefügt und als Regel formatiert. Warum passiert das und gibt es einen Weg um mein Problem zu lösen?

Hier sind die relevanten Teile des Codes.

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>

Das einzige, was ich bisher gefunden habe ist, dass Opazität alles in einem Behälter wirkt (das heißt, in figcaption), aber keine Möglichkeit, meinen Zähler zu vermeiden zu zeigen in die figcaption.

Answer 1

Ist das, was Sie im Sinn haben?

Wenn Sie mehr um den Text verzögern möchten, dass Sie den Wert transition-delay zwicken -

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

Soweit ich das Pseudo vor Gegenstand sagen konnte, war nicht erscheinen innerhalb des figcaption-Elements, aber innerhalb des Figurenelements wie erwartet. Ich habe einen Hover-Status für das before-Element hinzugefügt, um es gleichzeitig mit dem Text auszublenden, sodass es so aussieht, wie Sie es möchten.

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>