Update Tutorial: Bootstrap 3 Thumbnail Caption Animation mit animate.css Im Gegensatz zu diesem Artikel, basiert dieses Tutorial auf Bootstrap 3 und nutzt für die Effekte das animate.css Framework.
Mittlerweile sieht man den Effekt fast auf jeder Seite, überfährt mit der Maus ein Bild, gibt es einen Hovereffekt. Manchmal nur als Rückmeldung manchmal mit zusätzlichen Informationen. Das folgende Tutorial zeigt, wie man auf einfache Art und Weise diesen Effekt in ein Bootstrap Template einbaut. Dabei wird sich auf ein Minimum an zusätzlichen CSS-Klassen und Containern beschränkt, so dass man beim Styling auf die vorhandenen Bootstrap Klassen zurückgreifen kann. Hier vorab eine Vorschau:
HTML Markup – Thumbnail Grid
Das Erstellen eines fließenden Thumbnail Grids ist einfach in Bootstrap. Hier bediene ich mich eines Code Schnipsels von Bootsnipp welches die Thumbnails in einer Liste ausgibt.
Wie zu sehen ist, wird sich hier fast ausschließlich vorhandener Bootstrap Elemente bedient. Zwei Ausnahmen; ich gebe meiner Thumbnails Liste eine “id“, damit ich sie im weiteren Verlauf gezielt per jQuery ansprechen kann. Das zweite Nicht-Bootstrap Element sind die Container “caption” innerhalb jedes “thumbnail” Listenelements. Im “caption” Container sind die Infos enthalten, welche beim Mausover angezeigt werden sollen. Also eine Überschrift, ein kleiner Beschreibungstext sowie zwei Links. Die Links sind als Bootstrap Button gestaltet und enthalten “rel=’tooltip‘” und ein “title” Attribut, was später für die Ausgabe der Tooltips notwendig ist.
Ein bisschen CSS
Was tun wir hier? Wir weisen dem “thumbnail” Container position=”relative” zu, damit wir darin enthaltene Elemente absolute ausrichten können. Zusätzlich wird mit overflow=”hidden” verhindert, dass evtl. zu lange Inhalte des “caption” Containers abgeschnitten werden. Der “caption” Container wird standardmäßig über display=”none” ausgeblendet, er soll ja erst beim Mausover angezeigt werden, das erledigt später jQuery für uns. Ansonsten wird in der “caption” Klasse die Größe gesteuert, in diesem Fall 100% Höhe und Breite, damit das ganze Bild überlappt wird. Hintergrundfarbe und Schriftfarbe ist hier nach Wunsch möglich.
Ein bisschen jQuery
Mit jQuery erzeugen wir nun den Effekt, so dass sich der “caption” Container beim Hover über das Thumbnail legt. Gleichzeitig initialisieren wir den Bootstrap Tooltip, damit beim Hover der beiden Buttons ein schicker Tooltip erscheint.
Wir beginnen natürlich mit der Einbindung von jQuery und des Bootstrap Javascriptes. Im Beispielcode oben beides über CDN, hier könnt ihr natürlich auch eure lokale Version einbinden. Nachdem die Seite also geladen ist, wird als erstes der Tooltip initialisiert, und zwar betrifft das alles Link mit dem Attribut “rel=’tooltip‘. Angezeigt wird Inhalt des “title” Attributes. Der Rest ist schnell erklärt. Ich generiere eine jQuery hover Funktion wenn ich mit der Maus über die Class “thumbnail” fahre, wenn diese sich innheralb meiner Liste mit der angegeben ID befindet, in meinem Fall id=”hover-cap-4col”. Erste Funktion regelt “mouseenter”, die zweite entsprechend “mouseleave”.
Schlussbemerkung
Die gezeigte Variante sollte mit allen Thumbnail Grid Varianten funktionieren, also egal ob ihr 6 Spalten Thumbnails oder nur 2 Spalten habt. In der Demo sind entsprechend ein paar Varianten eingebaut. Die Demoseite könnt ihr speichern, sie greift komplett auf CDN Quellen zurück, so dass ihr ohne zusätzliche Files direkt eine lauffähige Version habt. Auf responsives Design wurde das Script nicht optimiert, da ich es so einfach wie möglich halten wollte. Je nach Bildschirmauflösung sollte hier noch ein paar Anpassungen vorgenommen werden. Schriftgröße der Überschrift, evtl. Ausblenden des Beschreibungstextes usw.