10 tolle Hover-Effekte mit CSS3 Transitions

Wie Sie mit CSS3 Transitions coole Hover-Effekte erstellen

10 wunderschöne CSS3 Hover Effekte

Dass mit CSS3 interessante Animationen und Effekte ohne Javascript erstellt werden können, ist seit langer Zeit bekannt. Dabei werden HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern animiert.

Aber die Animation mit :hover oder :focus wirkt wie ein Schalter: an, aus, an, aus. CSS Transitions bringen diese Möglichkeiten aber auf eine ganz neue Ebene.

Die Webseite von Tympanus.net/Codrops zeigt eine große Sammlung von CSS-Animationen und wie Sie die CSS3 Transitions für beeindruckende und schicke Hover-Effekte nutzen können.

In den 10 Beispielen von Codrops werden die Infos für die Bildquelle und die zusätzlichen Informationen in einen div gelegt – danach werden die Effekte über :hover im CSS aktiviert.

Zwar war das Einblenden von zusätzlichen Informationen auch schon vor CSS3 möglich, aber erst die Transitions erlauben benutzerfreundliche und flüssige Übergänge.

10 beeindruckende Hover-Effekte mit CSS3 Transitions

Die Grundstruktur der HTML-Datei sieht dabei wie folgt aus:

<div class="view"> 
     <img src="image.gif" /> 
     <div class="mask"> 
     <h2>Title</h2> 
     <p>Your Text</p> 
         <a href="#" class="info">Read More</a> 
     </div> 
</div>

Die Struktur dieser Datei variiert je nach Beispiel nur marginal und kann in den einzelnen Index.html-Dateien eingesehen werden.

Die CSS-Formatierung ist hingegen schon etwas komplexer und ist für jede einzelne Animation mehr oder weniger unterschiedlich.

Sie können das komplette Beispiel mit den gesamten CSS-Dateien, der HTML-Struktur und allen Grafiken hier auf Tympanus.net herunterladen.

Demo-Beispiele 1 bis 10 ansehen:

Um die tollen Hover-Effekte mit CSS3 Transitions anzusehen, klicken Sie bitte auf die Grafik und Sie gelangen zur jeweiligen Demo.

Beispiel 1

Beispiel 2

Beispiel 3

Beispiel 4

Beispiel 5

Beispiel 6

Beispiel 7

Beispiel 8

Beispiel 9

Beispiel 10

Quelle: tn3.de

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Gedanken zu “10 tolle Hover-Effekte mit CSS3 Transitions

  1. Sascha

    Hallo
    Beispiel 6 ist genau das was ich suche. Ich würde gerne diese css Datei in meine Webseite einbinden.
    Unterstehen die einem Copyright oder Lizenz?
    Gruss
    Sascha

    1. sura1 Autor

      Du kannst alle Beispiele ohne Einschränkungen für deine Projekte verwenden – denn auf der Seite von Codrops habe ich keine Lizenzvorgaben gefunden.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *