使用z-index和不透明度无法提供所需的结果（图像和文本布局）

Question

我是HTML和CSS的学习者。 我正在尝试将带有图像的文本放在其顶部。 我的要求是能够隐藏图像（可能使用opacity ）。 我选择模仿的样本（仅出于学习目的）是这里的所有.dribbble ： https : .dribbble 。

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>