Question

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

* 8个响应式bootstrap缩略图，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;
}

接下来，对于bootstrap布局，我添加了两个容器，每个容器都有一行和全宽（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'opacity属性'。在徘徊时，我们重置了该属性。要使动画更慢，只需更改“css3过渡”值，例如：'opacity 1s ease-in-out'

JQuery的：

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

希望这就是你要找的东西。

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

1 个答案: