CSS-Filter Blur verursacht Elemente zu verbergen

Question

Ich habe ein Problem durch css Blur-Filter verursacht. Ich möchte, dass ein Bild unscharf wird, wenn es sich bewegt, und stattdessen ein Titel angezeigt wird, während ich schwebe. Nachdem die Animation beendet ist, wird der Titel jedoch ausgeblendet (siehe unten).

Ich möchte den Titel bleiben sichtbar, solange es schwebt. Ich habe dir ein Schnippchen gebaut, hoffentlich könntest du mir helfen, diesen kleinen Käfer zu reparieren.

Wenn ich nicht css Unschärfe-Filter verwende, funktioniert alles gut.

body { 
 
\t margin: 0; 
 
} 
 

 
.imageFolder { 
 
\t float: left; 
 
\t display: block; 
 
\t width: calc(100vw/3 - 0px); 
 
\t height: calc(100vw/3 * 2/3 - 0px); 
 
\t border: 0px solid #444; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
} 
 

 
.imageBox { 
 
\t display: inline; 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
.imageBox img { 
 
\t display: inline; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
\t transition: all 0.2s ease-in; 
 
} 
 

 
.imageLabel { 
 
\t display: inline-block; 
 
\t margin: calc(0px - 100vw/3 * 2/3) auto 0; 
 
\t height: 40px; 
 
\t line-height: 40px; 
 
\t font-weight: 700; 
 
\t font-size: 24px; 
 
\t padding: 10px 40px; 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t opacity: 0; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
\t border: 1px solid white; 
 
} 
 

 
.imageFolder:hover > .imageBox img { 
 
\t width: calc(100% + 30px); 
 
\t height: calc(100% + 20px); 
 
\t margin: -10px -15px; 
 
\t transition: all 0.6s ease-out; 
 
\t filter: blur(4px); 
 
} 
 

 
.imageFolder:hover > .imageLabel { 
 
\t opacity: 1; 
 
\t transition: all 0.6s ease-out; 
 
}

<a href=""> 
 
\t <div class="imageFolder"> 
 
\t \t <div class="imageBox"> 
 
\t \t \t <img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt=""> 
 
\t \t </div> 
 
\t \t <div class="imageLabel">Charlotte</div> 
 
\t </div> 
 
</a>

Answer 1

position: relative zu .imageLabel hinzufügen.

body { 
 
    margin: 0; 
 
} 
 
.imageFolder { 
 
    float: left; 
 
    display: block; 
 
    width: calc(100vw/3 - 0px); 
 
    height: calc(100vw/3 * 2/3 - 0px); 
 
    border: 0px solid #444; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.imageBox { 
 
    display: inline; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.imageBox img { 
 
    display: inline; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    transition: all 0.2s ease-in; 
 
} 
 
.imageLabel { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: calc(0px - 100vw/3 * 2/3) auto 0; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    font-weight: 700; 
 
    font-size: 24px; 
 
    padding: 10px 40px; 
 
    text-decoration: none; 
 
    color: white; 
 
    opacity: 0; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border: 1px solid white; 
 
} 
 
.imageFolder:hover > .imageBox img { 
 
    width: calc(100% + 30px); 
 
    height: calc(100% + 20px); 
 
    margin: -10px -15px; 
 
    transition: all 0.6s ease-out; 
 
    filter: blur(4px); 
 
} 
 
.imageFolder:hover > .imageLabel { 
 
    opacity: 1; 
 
    transition: all 0.6s ease-out; 
 
}

<a href=""> 
 
    <div class="imageFolder"> 
 
    <div class="imageBox"> 
 
     <img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt=""> 
 
    </div> 
 
    <div class="imageLabel">Charlotte</div> 
 
    </div> 
 
</a>