使用css3显示图像标题

Question

我正在尝试在我的图片上显示标题。标题应该以两种不同的方式表现。一个是正​​常的，第二个是悬停。为了更好地理解，我添加了一个图像。核实。

这里我已经完成了很大一部分，但我无法正确显示图像上的正常标题。

有人能告诉我怎么弄清楚这个吗？

这是我的HTML -

<div class="slideimages">
    <div id="box-1" class="box">
        <div class="fix-caption">
           <h3>Fix Caption</h3>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        </div>                  
        <a href="">     
            <img class="image_scale" src="images/4750.jpg"/>
            <span class="caption scale-caption">
            <h3>Scale Caption</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
             </span>
        </a>
   </div>
</div>

带CSS的MY JS FIDDLE 谢谢。

Answer 1

添加以下CSS

.fix-caption {
    z-index: 5;
    background-color: white;
}

你的标题就在那里，只显示在图像后面......

或者在DOM顺序中放置.fix-caption较低的元素，这将有效地为它们提供更高的显示顺序（请注意，您仍然需要background-color）。

DEMO 1（z-index）： http://jsfiddle.net/Zfr5c/3/

DEMO 2（DOM订单）： http://jsfiddle.net/Zfr5c/2/