0

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

在此处输入图像描述

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

谁能告诉我如何解决这个问题？

这是我的 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>

我的JS FIDDLE与 CSS 谢谢。

4

1 回答 1

1

添加以下 CSS

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

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

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

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

DEMO 2（DOM 顺序）：http: //jsfiddle.net/Zfr5c/2/

于 2013-09-10T10:21:58.533 回答