带有鼠标悬停动画标题的响应式引导缩略图

Question

经过大量搜索，我仍然没有找到我想要的东西。 这是我需要的：

*8 ​​个响应式引导缩略图，2 行，每行 4 个（4 列网格）。

我用这个col-xs-6 col-sm-6 col-md-3 把它变成这样。

*当我将鼠标悬停在每个缩略图上时，我希望在缩略图上带有文字说明。

我浏览了整个互联网，但没有任何内容与我的网站相符。 我在这里有一个我想要的例子：http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

但我不知道如何将其放入我的网站。 有什么想法吗？

提前感谢任何人！

Answer 1

稍加一点CSS和jquery就可以得到你想要的动画了。

Working bootply example

基本上，我从您发布的链接中获取了 CSS，并在这里和那里切换了一些东西。我添加了 css3 标记来处理动画的缓动和调整动画大小。

CSS：

.thumb{
    height:200px;
    background:#E6E6E6;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #ddd;
    webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.thumb .caption{
    padding: 9px;
    opacity:0;
    -moz-opacity: 0.5;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    color: #fff !important;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.second-container{
    margin-top: 20px;
}

接下来，至于引导布局，我添加了两个容器，每个容器都有一行和全宽 (col-x-12) div。在每个 col-x-12 中，我添加了 4 列，它们将并排显示，直到它们达到平板电脑阈值。在平板电脑模式下，它们将并排显示 2 列。在移动设备中，将显示为堆叠在一起。请记住，您没有详细说明设计，因此您必须根据您的设计调整 css。

HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello world
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello Kitty
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              G'day Mate
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              A jolly good day to you
            </div>
        </div>
    </div>
</div>

<div class="container second-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Bonjour cher ami!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Guten tag mein freund!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hola amigo!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hello my friend
            </div>
        </div>
    </div>
</div>

最后，要触发动画，我们只需要一个简单的 JQuery 悬停方法。在悬停时，我们以缩略图为目标并寻找标题元素。选择后，我们只需更改 css 的“不透明度属性”。悬停时，我们重置属性。要让动画变慢，只需更改'css3 transition'值，例如：'opacity 1s ease-in-out'

jQuery:

$('.thumb').hover(function(){
    $(this).find('.caption').css('opacity','1');
}, function(){
    $(this).find('.caption').css('opacity','0');
});

希望这是您正在寻找的。​​p>