嘗試在圖像懸停後顯示內容

Question

只需從頭開始爲我的項目製作這個內容即可。我希望在圖像上創建懸停效果，然後在頂部顯示關於該圖像的內容。懸停時圖像將變暗，然後內容將顯示在其上方。

我遇到的問題是內容正在關閉其父窗格的不透明度。我如何讓小孩div不受不透明財產的影響？

這裏是我的HTML：

<div class="featured-home-bg"> 
      <div class="background-content"> 
       <div class="featured-home-content"> 
        <h2>Home Name</h2> 
        <p>Lorem Ipsum leo dormit tan loius ov noetermit.</p> 
       </div><!--- end featured-home-content ---> 
      </div><!--- end background-content ---> 
</div><!--- end featured-home-bg ---> 

這裏是我的CSS：

.featured-home-bg { 
    background: url(../images/home-1.jpg) no-repeat; 
    background-size: 400px; 
    height: 300px; 
} 

.background-content { 
    background-color: #000; 
    height: 225px; 
    width: 400px; 
    opacity: 0; 
} 

.background-content:hover { 
    opacity: 0.6; 
    -webkit-transition: opacity 0.50s ease-in-out; 
    -moz-transition: opacity 0.50s ease-in-out; 
    -ms-transition: opacity 0.50s ease-in-out; 
    -o-transition: opacity 0.50s ease-in-out; 
} 

.featured-home-content { 
    width: 400px; 
    height: 300px; 
} 

.featured-home-content:hover { 
    cursor: pointer; 
    width: 400px; 
    height: 300px; 
} 

Answer 1

，這是這裏做的，作爲@Henric奧克鬆說，但在這裏，每格

HTML

> <div class="image"><!-- image can be placed here --> <div 
> class="imagehover">text </div></div> 

CSS

.image {  
width: 400px; 
height: 400px; 
background-color: red; 
line-height: 400px; 
} 
.imagehover{ 
width: 400px; 
height: 400px; 
background:; 
opacity:0; 
text-align: center; 
font-size:20px; 
transition: 0.2s ease-in-out; 
} 
.image:hover .imagehover { 
transition: 0.2s; 
opacity:1; 
background-color: rgba(0, 0, 0, 0.5); 
text-align:justify; 
color:white; 
font-size:25px; 
font-weight:700; 
font-family: "apercu",Helvetica,Arial,sans-serif; 
text-align: center; 
line-height: 400px; 
} 

http://jsfiddle.net/d6yhnmnf/5/

Answer 2

我想你想有代碼這樣的事情？

.featured-home-bg:hover .background-content { 
opacity: 0.6; 
}