빠른 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} } 

내 웹 사이트의 URL은 지금 문 밖으로 내 방식에있어 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); 
}