Ich versuche, dieses Thumbnail-Hover-Caption-Plugin für Bootstrap zu verwenden.

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

Das ist der 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>

Auf dieser Seite gibt es einen Teil 'SlideIn / Out'.

Wenn Sie mit der Maus über ein Miniaturbild fahren, wird es normalerweise ein- oder ausgeblendet. Das ist was ich will.

Was ich aber auch brauche, ist, wenn mein Cursor nicht auf dem Vorschaubild schwebt, sollte unten eine kleine Beschriftung sein, in die ich dort einen Slogan schreiben werde.

Die Standardposition ist also eine kleine Beschriftung. Wenn sich meine Maus über dem Miniaturbild befindet, wird sie hineingleiten.

Dies ist ein genaues Beispiel, was ich brauche. Es kann angesehen werdenhttp://www.usatoday.com/news/

NO HOVER

SCHWEBEN

Dies ist die jsfiddle-Seitehttp://jsfiddle.net/g4j8B/