html - 使用 z-index 和不透明度没有给出预期的结果(图像和文本布局)

Question

我是 HTML 和 CSS 的学习者。我正在尝试在其顶部放置带有图像的文本。我的要求是能够隐藏图像(可能使用 opacity)。我选择模仿的示例(仅用于我的学习目的)是这里所有的 .dribbble:https://dribbble.com/dte .

CSS/HTML:

#images
{
	border: 0.25em solid red;
	overflow:auto;
	width:30%;
}
#images > figure
{
	margin: 1em;
	float:left;
	width: 80%;
	position: relative;
}
/* #images > figure > a
{
	max-width:30%;
	height: 10%;
} */
#images > figure >  img
{
	/* max-height:50%; */
	/* max-width: 80%; */
	border-radius:25%;
	position: relative;
	max-width:100%;
	z-index: 0;
}
#images > figure > img:hover
{
	z-index: -3;
	opacity:.1;
}
#images > figure > div.hidden
{
	position: absolute; 
	top:0px;
	left: 10px;
	opacity:0;
	width: 100%;
	height:100%;
	/* z-index: -0; */
	/* overflow:hidden; */ 
}
#images > figure > div.hidden:hover
{
	opacity:1;
	/* height:100%; */
	/* z-index: -1; */
}

<section id="images">
	<figure>
		<img
			alt="first"
			src="http://farm4.static.flickr.com/3221/2658147888_826edc8465.jpg"
		>
		<div class="hidden"> 
			<span> Howdy <br />
			</span>
		</div>
	</figure>
</section>

我的无效代码也可以在这里找到:http://jsfiddle.net/5RJTc/

请指导我在这里遗漏了什么或在这里做错了什么，以便我可以学习如何制作如此好的东西。

Answer 1

请参阅http://jsfiddle.net/roberttang30/5RJTc/4/

CSS/HTML:

#images {
    position: relative;
    height: 100px;
    width: 133px;
    text-align: center;
    border-color: red;
    border-style: solid;
}
.images {
    height: 100%;
    /*The following lines simply add the fade out effect and are optinal*/
    -o-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -webkit-transition: opacity 0.5s; 
    transition: opacity 0.5s;
}
.hidden {
    z-index: -1;    
    position: absolute;
    top: 0;
}
.images:hover {
    opacity: 0;
}

<div id="images">
    <img alt="first" id="1" class="images" src="http://farm4.static.flickr.com/3221/2658147888_826edc8465.jpg"> 
    <div class="hidden"> Howdy </div>
</div>