将鼠标悬停在叠加层上后，如何在图像上保留文本？

Question

我在其上有文字的图像上叠加一层。
当我将鼠标悬停在其上时，叠加层消失，但文本也一样。 我希望文字留在图像的顶部，我如何编辑我的代码来做到这一点？
这是我的CSS代码：

div.homepage-popular-categories { 
    position: relative; 
    display: inline-block; 
} 

div.homepage-popular-categories p { 
    margin: 0; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    color: #eeeeec; 
    background: rgba(0,0,0,0.5); 
    transition: opacity 0.5s; 
    opacity: 1; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 1.2em; 
    font-weight: bold; 
} 

div.homepage-popular-categories p:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
div.homepage-popular-categories p:hover { 
    opacity: 0; 
    transition: opacity 0.5s; 
    cursor: default; 
} 

这里是我的小提琴：
https://jsfiddle.net/7xax9p5e/

Answer 1

而不是使用opacity过渡，使用background过渡。

div.homepage-popular-categories { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
div.homepage-popular-categories p { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    color: #eeeeec; 
 
    background: rgba(0,0,0,0.5); 
 
    transition: background 0.5s; 
 
    opacity: 1; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
} 
 

 
div.homepage-popular-categories p:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
div.homepage-popular-categories p:hover { 
 
    background: rgba(0,0,0,0); 
 
    cursor: default; 
 
}

<div class="homepage-popular-categories"> 
 
\t <img src="http://www.eonline.com/eol_images/Entire_Site/20131022/rs_560x415-131122130228-1024.family-guy.jpg"> 
 
\t <p>Family Guy</p> 
 
\t 
 
</div>