html - 将文本标题添加到内联 图像

Question

我正在构建一个投资组合网站，并希望在我的主页图像下添加 html 文本标题。图像被格式化为一个内联列表，向左浮动。我对此有些陌生，所以如果它非常简单，请多多包涵。我希望文本在每张图片下方左对齐并在翻转时隐藏。

页面: http://www.lauradimeo.com/TEST/index2.html

忘了补充——我希望它在平板设备上看起来很棒。我知道翻转不会工作，但除此之外它应该是 ipad 等友好的。

谢谢!

Answer 1

我想我有你正在寻找的使用纯 CSS(无 Javascript)方法的东西: demo page

在您的第一个列表项中，我插入了一个 div:

div.caption {
    width:200px;           /* Because your images are 200px wide, this must match */
    clear:both;            /* This places the div after the floated image */
    position:relative;     /* Required to set positioning on the line below */
    top:-100px;            /* The div would normally appear at the bottom of the image. Move it up a little. */
    margin-bottom:-500px;  /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */
    z-index:2              /* Will explain this later */
}

<li> ... <div class="caption">The quick brown fox jumped over the lazy dog</div></li>

并且我向您的 li/a/img 元素添加了 z-index 属性:

#work ul li, #work ul li a, #work ul li a img {
    position: relative;    /* z-index only works on positioned elements */
    z-index: 1;            /* Default z-index 1 */
    display: block;
    float: left;
}
#work ul li a:hover, #work ul li a:active {
    position: relative;    /* Hover/active z-index 3 */
    z-index: 3;
}

看看如何使用 z-index 如果您不熟悉它。在测试页面上，标题 div 的 z-index 高于常规图像，但低于鼠标悬停图像的 z-index。

这有点老套，但还有改进的余地。另外仅供引用，您的页面在 IE 7 中看起来不正确 - 所有图像都出现在一个列中。如果您修复了标记，我的代码可能不需要修改。 =)