1

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

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

我用它col-xs-6 col-sm-6 col-md-3来使它像这样。

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

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

但我不知道如何把它放在我的网站上。有任何想法吗？

提前感谢任何人！

4

1 回答 1

1

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

工作引导示例

基本上，我从您发布的链接中获取了 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 过渡”值，例如：“opacity 1s ease-in-out”

查询：

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

希望这是您正在寻找的。

于 2014-07-31T18:59:37.980 回答