オーバーレイでマウスを動かすとテキストが画像に表示されます。

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; 
} 

ここに私のバイオリンです：代わりにopacityトランジションを使用しての
https://jsfiddle.net/7xax9p5e/

Answer 1

、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>