¿Cómo agregar subtítulos a thumbnail thumbnail – Bootstrap?

Estoy tratando de usar este complemento de subtítulos en miniatura para el arranque.

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

Este es el código.

Caption Title

ALT NAME

En esta página, hay una parte ‘SlideIn / Out’.

Cuando se desplaza sobre una miniatura normalmente se desliza hacia adentro o hacia afuera. Esto es lo que quiero.

Sin embargo, lo que también necesito es que cuando mi cursor no está sobre la miniatura, debe haber un pequeño título en la parte inferior, donde escribiré un eslogan.

Así que, básicamente, la posición predeterminada será un pequeño título, cuando mi mouse está sobre la miniatura se deslizará hacia adentro.

Este es un ejemplo exacto de lo que necesito. Se puede ver http://www.usatoday.com/news/

NO HOVER

enter image description here

FLOTAR

enter image description here

Esta es la página jsfiddle http://jsfiddle.net/g4j8B/

Debe colocar otro div encima de la imagen y adaptarla a sus necesidades.

A continuación, agregue hide () o show () de acuerdo con el deslizamiento de Bootstraps, etc.

VIOLÍN

HTML:

 
  • Caption Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipisicing eli...
    ALT NAME

    Item Name

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

    EDITAR

    El Jquery anterior mostrará y ocultará cada .caption-btm.

    Pero esto ocultará el específico que está siendo sobrevolado:

    VIOLÍN

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

    Aquí está mi violín , mira el primer artículo.

    Lo que he hecho es agregar un texto sobre la leyenda y después de la miniatura y decir que se oculte cuando el usuario pase el ratón sobre la miniatura:

     .thumbnail:hover .front { display: none; } 

    No es bonito (tiene CSS en línea por el ejemplo), pero creo que hace lo que quiere.