Entwicklung & Design

Schicke Hover-Effekte mit CSS3 Transitions

Mit CSS3 ist Vieles möglich, aber Transitions bringen diese Möglichkeiten auf eine neue Ebene. Tympanus.net zeigt uns, wie wir Transitions für beeindruckende und schicke Hover-Effekte nutzen können.

Das Einblenden zusätzlicher Informationen, zum Beispiel in Produktfotos, endet oft in vielen Optimierungsschritten für unterschiedliche Bildformate, -größen etc. und am Ende hat man oft auch keinen wirklich attraktiven Effekt erreicht. Mit CSS3 Transitions kann man sich diese Arbeit ersparen.

Im Beispiel von Tympanus.net werden die Informationen für die Bildquelle und die zusätzlichen Informationen in einen div gelegt und dann die Effekte über hover im CSS aktiviert.

Beispiele für Transitions

Das Einblenden zusätzlicher Informationen war zwar auch schon vor CSS3 möglich. Aber Transitions machen erst schicke und nutzerfreundliche Übergänge möglich.

Das kann dann zum Beispiel so aussehen:

CSS3 Transitions

CSS3 Transitions

Die Transitions laufen dabei sehr flüssig und selbst bei einer großen Anzahl Bilder sind die Übergänge immer noch stabil. Dadurch werden Transitions auch für große Produktkataloge interessant, da JavaScript an der Verarbeitung einer großen Anzahl von Elementen oft scheitert.

Ein Problem besteht aber nach wie vor: Der Internet Explorer unterstützt Transitions erst ab Version 10.0. Damit können nur auf knapp der Hälfte aller Geräte Transitions angezeigt werden.

Hover-Effekte für Bilder mit CSS3 Transitions: Tympanus.net

Auf Tympanus.net werden uns die verschiedenen Möglichkeiten der CSS3 Transitions für hübsche Hover-Effekte auf Bilder gezeigt. Dabei geht die Palette über das einfach Aufploppen von Informationen bis zum Ausblenden der Bilder mit Dreh-Effekt. Vor allem ist es aber eine Sammlung, die viele Webdesigner inspirieren wird, die Möglichkeiten der Transitions zu nutzen.

Denn die Anwendung von Transitions auf Elemente erfordert nur eine sehr geringe Einarbeitungszeit und erspart eine Menge Arbeit in JavaScript.

Was haltet ihr von Transitions? Unnütze Spielerei oder eine Möglichkeit zur Verbesserung der Nutzerfreundlichkeit ?

Weiterführende Links zum Thema:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
abouttheweb
abouttheweb

Sieht ja ganz nett aus. Aber „flüssig“ ist was anderes.

Antworten
JMK

Geht superflüssig. und sieht schick aus

Antworten
Eller
Eller

schick, aber kann man auffem Tablet leider nicht gebrauchen ;-)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung