Html 修改引导缩略图

我想修改引导缩略图悬停选项，只是把一些文字的图像颜色。我不太明白如何做一个基本的图像悬停改变图片的颜色，并添加一些文字。我非常喜欢本文中的转换

但我不知道要添加什么CSS，等等。。。有人能给我解释一下叠加图像和在悬停上添加居中文本的基本原理吗。我知道这是非常基本的东西，但我真的有问题。如果帮助可以坚持以下代码

<div class="col-xs-6 col-md-3">
    <div class="thumbnail">
        <img src="images/bg3.jpg">
    </div>
</div>

---

jQuery&CSS将是实现这一目标的最佳选择。我建立这真的很快，这是一个简单的方式来实现你的期待。这应该会让你开始，希望能有所帮助

至于如何实现这一点的解释，我建议阅读jQuery悬停效果以及CSS悬停效果。您还可以使用jquerymouseover，这将使小提琴更加简单和干净

$(function() {    

$('something').hover(

    function() {
        $(this).find('.caption').slideDown(250);
        $('.caption-btm').hide();
    },

    function() {
        $(this).find('.caption').slideUp(250);
        $('.caption-btm').show();
    });

$('something').hover(

    function() {
        $(this).find('.caption').fadeIn(250);
    },

    function() {
        $(this).find('.caption').fadeOut(250);
    });    

$('something').hover(

    function() {
        $(this).find('.caption').show();
    },

    function() {
        $(this).find('.caption').hide();
    });

}))

CSS悬停：

jQuery悬停：

---

jQuery鼠标悬停：

您可能会发现这个问题非常有用。