css - 试图在包含图像的 div 中显示标题

Question

我有一个 div，其中包含带有一些 CSS 过渡效果的图像。我正在尝试在此 div 内制作一个标题，以显示在包含图像顶部的底部。重要的是我需要标题显示在框内而不是框外。

这是我的:

.t_box {
        width: 250px;
        height: 155px;
        background-color: #ccc;
        border: 5px solid #FF0000;
        position: relative;
        z-index: 40;  
        overflow:hidden;

}
.t_box img {
        max-width: 100%;
        opacity: 0.6;
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
}
.t_box img:hover {
        opacity: 1;
        -ms-transform: scale(1.3);
        /* IE 9 */
        -webkit-transform: scale(1.3);
        /* Chrome, Safari, Opera */
        transform: scale(1.3);
}
.t_caption {
        width: 100%;
        height: 40px;
        background-color: #666;
        color: #fff;
        z-index: 50;

        position: absolute;
}

和 HTML:

<div class="t_box">
    <img src="image.jpg" />
    <div class="t_caption">This is a caption</div>
</div>

这是 fiddle 的链接:http://jsfiddle.net/seenvvty/

Answer 1

在 t_caption css 中添加 bottom:0;:

.t_caption {
    width: 100%;
    height: 40px;
    background-color: #666;
    color: #fff;
    z-index: 50;
    position: absolute;
    bottom:0;
}

JSFiddle