Jquery 如何设计带有标题的图像缩略图？

这是我想使用引导程序设计的图像。但是，该图像的标题应该在该图像的下方。当我将鼠标悬停在该图像上时，标志符号图标

$（文档）.ready（函数（）{
$（“[rel='tooltip']”）。tooltip（）；
$（'.thumbnail'）。悬停(
函数（）{
$（this）.find（'.caption'）.slideDown（250）；//.fadeIn（250）
},
函数（）{
$（this）.find（'.caption'）.slideUp（250）；//.fadeOut（205）
}
); 
});
正文{
填充顶部：50px；
}
.缩略图{
位置：相对位置；
溢出：隐藏；
}
.标题{
位置：绝对位置；
排名：0；
右：0；
背景：rgba（66,139,202,0.75）；
宽度：100%；
身高：100%；
填充：2%；
显示：无；
文本对齐：居中；
颜色：#fff！重要；
z指数：2；
}
divclass=“col-md-3”>
缩略标题
简短的缩略图描述



您可以查看上面的示例