將鼠標懸停在疊加層上後，如何在圖像上保留文本？

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>