Question

我有一个包含带有一些CSS过渡的图像的div。我试图在这个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>

以下是小提琴的链接：http://jsfiddle.net/seenvvty/

Answer 1

在bottom:0; css：

中添加t_caption

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

JSFiddle

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

1 个答案: