html - 图像悬停后尝试显示内容

Question

只是为了我的一个元素从头开始制作这个。我想在图像上创建悬停效果，然后在顶部显示有关该图像的内容。图像会在悬停时变暗，然后内容会显示在图像上方。

我遇到的问题是内容超出了其父 div 的不透明度。如何使子 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 Åkesson 所说的方法，但这里有每个 div

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/