Quick CSS懸停問題

Question

James在這裏。我有一個快速的問題。我想添加一個像http://themaxdavis.com類似圖像懸停的效果，但由於某種原因，我無法完全理解它。當你將鼠標懸停在圖片文章（.pic）上時，我想添加到我的代碼中，一個0.5遮蓋的黑色疊加層將淡入圖片本身。此外，如果任何人都可以幫助我找出一種將文本置於黑色疊加層中的方式，就像Max Davis一樣，那將是非常棒的。這是.pic元素的代碼。

.pic { position:relative; overflow: hidden; float: left; 
{block:IndexPage}width:250px;{block:IndexPage} 
{block:PermalinkPage}width:500px; margin-top: 39px; margin-bottom: 
15px;{/block:PermalinkPage} {block:IndexPage}margin: 15px 15px 0px 
0px;{/block:IndexPage} background-color: #FFF; z-index: 1; 
{block:IndexPage}box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); 
-webkit-transition: box-shadow 0.3s ease-out; 
-moz-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s 
ease-out; 
-o-transition: box-shadow 0.3s ease-out;{block:IndexPage} } 

我的網站的網址是http://-respawn.tumblr.com

PS我現在對我的方式出了門，所以我不會接受的答案馬上，但我會接受他們，並儘快閱讀全部我回家（了。

Answer 1

整理了代碼：

假設.PIC將包含圖片作爲背景或將是一個IMG元件。

.pic 
{ 
    position:relative; 
    overflow: hidden; 
    float: left; 
    width:250px; 
    width:500px; 
    margin-top: 39px; 
    margin-bottom: 15px; 
    margin: 15px 15px 0px 0px; 
    background-color: #FFF; 
    z-index: 1; 
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); 
} 

創建內部.PIC空DIV元素，並給它這種風格。

#emptyDiv 
{ 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    background-color: transparent; 
    -webkit-transition: box-shadow 0.3s ease-out; 
    -moz-transition: box-shadow 0.3s ease-out; 
    transition: box-shadow 0.3s ease-out; 
    -o-transition: box-shadow 0.3s ease-out; 
} 
#emptyDiv:hover 
{ 
    background-color: rgba(0, 0, 0, 0.5); 
}