试图显示包含图像的div内的标题

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

在t_caption CSS添加bottom:0;：

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

JSFiddle