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