CSS过滤器模糊导致元素隐藏

Question

我有一个问题引起的CSS模糊过滤器。我希望图像在被徘徊时变得模糊，并且在悬停时显示标题。但是，动画完成后，标题隐藏（请参阅下面的剪辑）。

我希望标题只要徘徊一直保持可见状态。我建立了一个剪裁，希望你能帮我修复这个小bug。

如果我不使用css模糊过滤器，一切正常。

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到.imageLabel。

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>