Comment ajouter de la légende de la vignette placez - Bootstrap?

Je suis en train d'utiliser cette miniature passez légende plugin pour bootstrap.

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

C'est le code.

<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" alt="ALT NAME">
              </div>

Dans cette page, il y a une partie 'SlideIn/Out".

Lorsque vous passez la souris sur une vignette, normalement, il glisse dans ou à l'extérieur. C'est ce que je veux.

Cependant, ce que j'ai aussi besoin, c'est quand mon curseur n'est pas passez la souris sur la vignette, il doit être de petite légende au bas de laquelle je vais écrire un slogan.

Donc, fondamentalement, la position par défaut de la petite légende, quand ma souris est au-dessus des vignettes elle va glisser dans.

C'est un exemple précis de ce que j'ai besoin. Il peut être consulté http://www.usatoday.com/news/

PAS DE HOVER

PASSEZ

C'est le jsfiddle page http://jsfiddle.net/g4j8B/

OriginalL'auteur SNaRe | 2013-07-24

Vous avez besoin de placer un autre div en haut de l'image et de style à vos besoins.

Puis ajouter le cacher() ou afficher() en fonction de l'Amorce de glissement etc.

VIOLON

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" alt="ALT NAME">
                    </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);
                });

MODIFIER

Ci-dessus Jquery permettra d'afficher et de masquer tous les .légende-btm.

Mais cela permet de masquer le seul qu'il a été survolé:

VIOLON

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);
            });

Quand il glisse vers le haut, la légende apparaît immédiatement. Est-il possible d'afficher la légende, après une baisse jusqu'finitions? Aussi est-il possible de faire un fond transparent, comme il est stationnaire.
Il est possible de rendre le fond transparent avec rgba. Aimeriez-vous la légende de bas de glisser dans l'un que l'autre glisse vers le haut?
Comme ceci jsfiddle.net/g4j8B/4 ?
Ça a l'air cool. Pouvez-vous mettre à jour votre poste avec le code mis à jour?
Voir mon montage! J'ai utilisé le même que le Bootstrap de la diapositive()

OriginalL'auteur designtocode

1

Voici mon violon, vérifier le premier élément.

Ce que j'ai fait est d'ajouter du texte bedofre la légende et après la miniature et dites-lui de cacher lorsque l'utilisateur place le pointeur sur la vignette:
```
.thumbnail:hover .front {
    display: none;
}
```
Il n'est pas assez (il a du css pour le bien de l'exemple), mais je pense que c'est ce que vous voulez.

Comme vous l'avez dit c'est plus joli et au bar qui doivent être au fond. À côté lorsque je déplace mon curseur de la miniature, de la barre de légende s'affiche avant l'attente slideout fonction. Il doit être indiqué après slideout finitions.
Oui, que vous pouvez effectuer en jouant sur la slideout temps de l'animation, ou même animer le passez la souris sur la vignette avec -webkit-transition.

OriginalL'auteur António Regadas

Vous devez vous connecter pour publier un commentaire.