尝试在图像悬停后显示内容

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