Bootstrap Thumbnail问题

Question

我希望我的标题位于缩略图内，并且该图片不会溢出标题：

我的HTML：

 <div class="col-lg-4 col-md-4 wow fadeInLeft" data-wow-delay="1.8s">
                        <div class="thumbnail">
                          <a href="http://stoptheworld-iwannagetoff.com/"> <img src="images/stoptheworldxxx.jpg"></a>
                        </div>
                        <a href="http://loll.com/" ><p class="caption text-center">Thumbnail image</p></a>
                    </div>

CSS：

.thumbnail{
           width:100%;
           overflow: hidden;


}

img{
    -webkit-transition:all 0.5s ease;

}

img:hover{
    transform:scale(1.3);opacity:0.6;background-color: blue;

}

我尝试将标题放在关闭缩略图的div标记上方，但随后图像溢出标题。

Answer 1

尝试：

<div class="col-lg-4 col-md-4 wow fadeInLeft" data-wow-delay="1.8s"> <div class="thumbnail"> <a href="http://stoptheworld-iwannagetoff.com/"> <img src="images/stoptheworldxxx.jpg"></a> <div class="caption text-center"> <a href="http://loll.com/" >Thumbnail image</a> </div> </div> </div>