如何为缩略图悬停添加标题 - Bootstrap？

Posted 2023-03-06

【中文标题】如何为缩略图悬停添加标题 - Bootstrap？

【英文标题】：How to add caption to thumbnail hover - Bootstrap?

【发布时间】：2013-07-23 15:02:57

【问题描述】：

我正在尝试将此缩略图悬停字幕插件用于引导程序。

http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

这是代码。

<div class="thumbnail">
                <div class="caption" style="display: none;">
                    <h4>Caption Title</h4>
                    <p><a href="#" class="btn btn-inverse" rel="tooltip" title="" data-original-title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="" class="btn btn-inverse" data-original-title="Visit Website"><i class="icon-share"></i></a></p>
                </div>
                <img src="http://placehold.it/600x400" >
              </div>

在这个页面中，有一个部分'SlideIn/Out'。

当您将鼠标悬停在缩略图上时，它通常会滑入或滑出。这就是我想要的。

但是，我还需要当我的光标没有悬停在缩略图上时，底部应该有一个小标题，我将在那里写一个标语。

所以基本上，默认位置是小标题，当我的鼠标悬停在缩略图上时，它会滑入。

这是我需要的一个确切的例子。可以查看http://www.usatoday.com/news/

无悬停

悬停

这是jsfiddle页面http://jsfiddle.net/g4j8B/

【参考方案1】：

这是我的fiddle，查看第一项。

我所做的是在标题和缩略图之后添加一些文本，并告诉它在用户将鼠标悬停在缩略图上时隐藏：

.thumbnail:hover .front 
    display: none;

它并不漂亮（为了示例，它具有内联 css），但我认为它可以满足您的需求。

【讨论】：

正如你所说，它应该更漂亮，并且栏需要在底部。除了当我从缩略图上移动光标时，在等待滑出功能之前会出现标题栏。它应在滑出完成后显示。

是的，您可以通过调整滑出动画时间，甚至使用 -webkit-transition 为缩略图上的悬停设置动画来实现。

【参考方案2】：

您需要在图像上方放置另一个 div 并根据您的需要设置样式。

然后根据 Bootstraps 滑动等添加 hide() 或 show()

FIDDLE

HTML：

<li class="span3">
                    <div class="thumbnail">
                        <div class="caption">
                             <h4>Caption Title</h4>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                            <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a>  <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a>

                            </p>
                        </div>
                        <div class="caption-btm">Lorem ipsum dolor sit amet, consectetur adipisicing eli...</div>
                        <img src="http://placehold.it/600x400" >
                    </div>
                     <h4>Item Name</h4>

                </li>

CSS：

.caption-btm
        background: rgba(0,0,0,0.6);
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 4px;
        color: #fff;
    

jQuery:

$('#hover-cap-4col .thumbnail').hover(

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

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

编辑

上面的 Jquery 将显示和隐藏每个 .caption-btm。

但这会隐藏它被悬停的特定的：

FIDDLE

jquery：

    $('#hover-img .thumbnail').hover(

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

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

【讨论】：

当它向上滑动时，标题立即出现。向上滑动完成后是否可以显示标题？也可以在悬停时使背景透明。

可以使用 rgba 使背景透明。您希望底部标题在另一个标题向上滑动时滑入吗？

当然，只有 CSS 和 Jquery 发生了变化。我编辑了以上内容。

我有一个简单的问题，而不是从左下角来，那个标题可以从左向右滑动吗？

您可以尝试使用 Bootstrap 幻灯片，但他们没有从右侧或左侧的选项。请参阅使用引导程序 slideDown() 的这个小提琴jsfiddle.net/g4j8B/6。如果你想从侧面获得它，你可能需要编写一个自定义脚本来添加或删除一个类。