Kreativ werden mit :hover: Beispiele und Tipps

Es gibt mehr Möglichkeiten, als nur die Schrift- oder Hintergrundfarbe beim Rollover zu verändern.

  • von Lennart Prange

Es ist immer wieder überraschend, wenn man mit der Maus über ein Element auf einer Webseite fährt und etwas anderes passiert, als eine kleine Farbänderung.

Mittlerweile fallen mir diese kleinen Details immer häufiger ins Auge. Und solange man es richtig anstellt, macht es auch einen sehr positiven Eindruck. Jedenfalls auf mich.

In diesem Beitrag zeige ich euch, was Webdesigner mit der Pseudoklasse alles anstellen und gebe euch wie immer viele Tipps zum Thema.

Tipps

Bevor ich die Beispiele anführe und kommentiere, erst mal die Theorie. Wer sich um Rollover Effekte wirklich viele Gedanken macht, kümmert sich um die Details. Diese Details können den Unterschied zwischen einem herausragenden und einem guten Webdesign machen.

Wenn man sich damit beschäftigt, ist es meiner Meinung nach keine verschwendete Zeit, es ist aber sehr leicht, sich in diesen Details zu verlieren und darauf sollte man schon etwas achten.

  • Es darf überraschen – Man erwartet als Besucher eine Änderung der Schrift- oder Hintergrundfarbe und ist deswegen umso mehr überrascht, wenn plötzlich etwas ganz anderes, außergewöhnliches passiert.
  • Es muss passen – Achtet in jedem Fall darauf, dass der Effekt letztendlich auch ins Gesamtbild reinpasst. Der Nutzer darf zwar überrascht sein, er sollte aber nicht abgeschreckt werden. Die Stimmung darf nicht komplett zerstört werden. Diese Zerstörung kann man natürlich auch als Ziel haben, aber dann sollte man sehr genau wissen was man tut. Ich habe jedenfalls kein Beispiel gefunden, wo ein unpassender Rollover-Effekt irgendwas verbessert hätte.
  • Mobile Endgeräte versauen alles – Das Problem mit den iPads, iPhones usw. da draußen ist, dass sie nichts mit :hover anfangen können. Achtet darauf, dass eure Seite gut funktioniert. Auch wenn der Nutzer mit einem iPhone vorbei kommet.
  • Es sollte ein Link sein – Bei den Beispielen werdet ihr teilweise Elemente sehen, die zwar mit einem Rollover Effekt ausgestattet wurden, dabei aber keine Links sind. Das ist immer kritisch. Ich persönlich erwarte immer einen Link, wenn sich etwas verändert, sobald man mit der Maus darüber fährt und ertappe mich dabei, wie ich auf dem Element rumklicke. Vielleicht gilt das ja auch nur für mich.

Von simpel zu WOW

Jeder Link sollte meiner Meinung nach irgendeine Reaktion zeigen, wenn ein Besucher mit der Maus darüber fährt. Das ist einfach Benutzerfreundlich. Selbst wenn der Link offensichtlich ist, sollte irgendwas passieren.

Das fängt mit ganz einfachen „Effekten“ an. Das ist zum Beispiel die Veränderung der Schrift- oder Hintergrundfarbe. Diese simplen Dinge reichen aus Usability Gesichtspunkten natürlich vollkommen aus, aber das ist ja kein Grund, an der Stelle aufzuhören. Viele Webdesigner haben mehr Aufwand betrieben, um mit der Pseudoklasse etwas außergewöhnliches anzustellen oder wenigstens aus der Masse hervorzustechen.

Launchlist

launchlist

Bei Launchlist erscheint eine kleine Sprechblase, wenn man mit der Maus über das Logo fährt. Gerade das Logo wird gerne verwendet, um etwas Interessantes mit der Pseudoklasse anzustellen.

In diesem Fall bin ich nicht 100%ig von der Idee überzeugt, denn Das Logo ist kein Link.

Das ist übrigens bei David Hellmann besser umgesetzt.

Creanto

creanto

Auch bei Creanto ist das Logo der “Tatort”. Allerdings ist das Ganze etwas aufwändiger, als beim letzten Beispiel.

Die Umsetzung ist hier wirklich recht interessant. Das Logo verändert sich nciht nur, wenn man mit der Maus darüberfährt, sondern auch, wenn man klickt. Auch ist das Logo aber kein Link zu irgendetwas, sondern nur eine Art Spielzeug. Trotzdem ganz nett gemacht.

Dragon Labs

Dragon Labs

In den “Laboren” von Dragon Interactive sind nicht nur gute Tutorials sondern auch ein sehr cooler Hover Effekt.

Die Blasen, die in den einzelnen Flüssigkeiten aufsteigen, sind zwar nicht nötig, aber trotzdem ein nettes Extra. Webdesign is in the details 😉

dconstruct

dConstruct 2010

Die einzelnen Sprecher der Veranstaltung sind hier durch Fotos an einem prominenten Platz in Szene gesetzt. Alle sind schwarz/weiß, was auch absolut vernünftig ist, wie ich finde. Sonst würden die vielen Farben das Gesamtbild stören.

Fährt man aber mit der Maus über ein Foto, wird es erstens farbig und zweitens wird der Name der Person angezeigt.

Diese Rollover Effekte bei Fotos sind sehr beliebt. Ob von schwaz/weiß zu farbig oder von scharf zu unscharf – es sieht meistens gut aus und kann auch sehr sinnvoll eingesetzt werden.

Mayflower

mayflower

Wenn man mit der Maus über die verschiedenen Sorten fährt (die sechs Buttons mit abgerundeten Ecken), passieren gleich mehrere Dinge: Im Hintergrund taucht ein roter Streifen auf, der Schlagschatten wird geringer, die Schrift heller, der Button wird leicht nach oben versetzt und der Hintergrund des Buttons verändert sich.

Es verändern sich also viele kleine Details. Entscheidend ist, dass es perfekt zur Seite passt. Hier passiert nichts wirklich Atemberaubendes, aber es ist doch wesentlich interessanter als das Meiste, was man auf anderen Seiten sieht. Viel mehr wäre auch übertrieben gewesen und hätte nicht in das Erscheinungsbild gepasst.

Von Seite zu Seite muss man entscheiden, wie man :hover benutzen möchte. Bei einem total minimalistischen Portfolio ist es dann vielleicht doch die Änderung der Schriftfarbe, die optimal reinpasst.

Digital Media 2011 Stockholm

Digital Media 2011 Stockholm

Ziemlich originell und überraschend finde ich die Idee, die hier umgesetzt wurde. Die Ganzen Bilder der Personen verändern sich.

Das ist natürlich etwas aufwändiger. Man muss von jeder Person zwei Fotos machen und sie einbauen. Es reicht nicht einfach eine CSS Eigenschaft zu ändern. Trotzdem war es meiner Ansicht nach die Mühe absolut wert. Denn dieser Effekt macht die Seite sehr interessant und gibt ihr das gewisse Etwas.

David DeSandro

David DeSandro

Hier wurde CSS mal etwas ausgereizt. Im Footer finden sich sehr viele Spielereien und auch wenn ich nicht alle so schön finde, gehört die Seite in diese Sammlung.

Der Footer wirkt auf mich eher wie eine kleine Bühne, auf der David DeSandro zeigt, was er kann. Meiner Ansicht nach, passen die drei Elemente nicht so gut zusammen. Es ist etwas zu viel des Guten.

Adham Dannaway

Adham Dannaway

Die Seite habe ich kürzlich erst erwähnt, und auch dort wurde in den Kommentaren bereits angemerkt, dass sie momentan extrem häufig verlinkt wird. Wie dem auch sei, sie passt einfach hier rein.

Hier steht der Rollover Effekt im Zentrum der Startseite und nicht nur die Idee sondern auch die Umsetzung passt.

Es ist ein wirklich gutes Beispiel dafür, wie kreativ man die Pseudoklasse einsetzen kann.

Vegaone

VEGAONE

Wer nach etwas Aufwändigem gesucht hat, sollte bei dieser Seite auf seine Kosten kommen. Schon der Splashscreen hält einige Effekte bereit und die eigentliche Seite geizt auch nicht gerade mit Rollover Effekten. Der Gestalter hat das wirklich eindrucksvoll umgesetzt.

In diesen Ganzen grafischen Leckerbissen steckt sicherlich extrem viel Arbeit, aber zweifellos zeigt das auch, wozu der Designer fähig ist. Es ist sicherlich nicht jedermanns Sachen und passt zu den wenigsten Webseiten. Die Seite ist in diesem Fall ja quasi “um die Rollover Effekte herum gebaut”. Sie sind der interessanteste und wahrscheinlich aufwändigste Teil der Webseite und nicht nur ein kleines Extra.

Fazit

Ich bin gespannt. Vielleicht tauchen in nächster Zeit ja ein paar mehr Webseiten auf, die ein paar Überraschungen bereit halten.

Selten habe ich so lange gebraucht, um passende Beispiele zu finden und das zeigt mir deutlich, dass hier noch viel Potenzial ist, um ausgefallene Ideen umzusetzen und sich abzuheben.

17 Kommentare

  1. Manuel
    17. August 2010 um 11:20 Uhr

    Schöner Artikel. So explizit über die Verwendung von hover hab ich außer zur besseren Abhebung von Links tatsächlich noch nicht nach gedacht. Wirklich ne schöne Sammlung die sehr gut erklärt und zeigt was sich damit anstellen lässt.

    • Lennart Prange
      17. August 2010 um 12:09 Uhr

      Danke, freut mich, dass dir der Artikel zusagt 🙂

  2. Robin
    17. August 2010 um 14:44 Uhr

    Sehr schöner Beitrag. Ich finde auch das bestimmte Seiten hover öfter nutzen sollten.

    Mal ein bisschen Off Topic. Das mit den Buttons unten hast du besser gemacht. Gute größe und der Mouseover ist auch gut!

  3. Ohrflieger
    17. August 2010 um 15:59 Uhr

    Sehr schöne Seiten dabei, danke für die kreative Zusammenstellung! 🙂
    Auf einigen Seiten werden die Effekte aber nicht (nur) mit :hover umgesetzt. Creanto spielt mit Canvas (Javascript) und Vegaone setzt ganz auf Flash.

    • Lennart Prange
      17. August 2010 um 16:05 Uhr

      Danke 🙂

      Da hast du natürlich recht, vielleicht hätte Rollover im Titel besser gepasst als :hover.

  4. l0r3nz
    17. August 2010 um 16:39 Uhr

    Wow! Bin beeindruckt! Bei manchen Beispielen geht der Mund schwer zu! Glaub deine Seite sollte ich mal bookmarken 😉

  5. nik
    17. August 2010 um 18:20 Uhr

    Hmm, kann die Begesiterung gerade für Vegaone überhaupt nicht nachvollziehbar. Erstens Flash – ohne Plugin kein Inhalt. Zweitens erscheint mir die Umsetzung aufgesetzt. Ob man es nun Selbstzweck oder Bling Bling nenen will, beim 2. oder 3. Besuch der Seite nervt es nur noch, schon weil klar wird, das informationsstrukturell hier überhaupt nichts zu holen ist. Ganz deutlich wird es, wenn man auf das eingebaute Fremd-Gästebuch klickt.

    Rollover haben genau wie in den 90ern typisch mit Javascript Image-Replacement immer noch das Potential zum Blendeffekt. Will man zeitgemäß und (vor allem) sinnvoll Hovern einsetzen, sollte man das IMHO unter folgenden Aspekten tun:
    – Barrierefreiheit – das Angebot muss auch ohne Effekt funktionieren
    – Unterstützend – das Hover sollte konkret den darunterliegenden Link fördern. Reine Blickfänge nutzen sich schnell ab und lassen den Zusammenhang zum Gegenstand des Links missen
    – Zeitgemäß – die Umsetzung sollte standardkonform sein.

  6. Klaus
    17. August 2010 um 23:37 Uhr

    Hey Lennart, wo findest Du bloß immer diese geilen Seiten? Schöner Beitrag, das regt doch mal die Kreativität an!
    Cool finde ich übrigens auch den Lavalamp-Hover! (Den kann man auf meiner Seite sehen. 😉

  7. Martin Schneyra
    18. August 2010 um 10:37 Uhr

    Ein schöner Artikel mit viel Inspiration, danke dafür.

    Ich finde es nach wie vor schade, dass mobile Geräte leider nicht in den Genuss der teilweise wirklich gut durchdachten und implementierten Effekte kommen.

  8. René
    18. August 2010 um 17:16 Uhr

    Leider wird der :hover sehr oft vergessen, was nicht nur die Usability verschlechtert, sonder auch einen schlechten Eindruck hinterlässt.
    *PUSH*

  9. Sarturia
    19. August 2010 um 09:44 Uhr

    Gefallen mir richtig gut die Beispiele.
    Am schönsten finde ich persönlich die Darstellung der Stockholmer Digital Media.
    Gibt es da einen Trick, oder sind sämtliche Fotos dort vermutlich von Hand doppel belegt worden?

  10. Thomas
    25. August 2010 um 10:21 Uhr

    Vielen Dank für die Zusammenstellung! Das mit den zwei Bildern der Angestellten wurde sogar schon vor 2-3 Jahren in der Agentur gelöst, bei der ich gerade mein Praktikum absolviere.
    Ich kann nik aber nur zustimmen, dass Vegaone übertrieben ist, mir gefällts überhaupt nicht.

    Zu der Seite von David DeSandro muss ich sagen, dass der Hover in meinem Opera deutlich angenehmer dargestellt wird als im Firefox.

    Und bei der Mayflower-Seite erscheint das rote Band früher als die anderen Veränderungen (gefällt mir aber auch sehr gut).

  11. TYPO3 Agentur
    25. August 2010 um 23:06 Uhr

    Sehr schöne Ansammlung. Gefallen tut mir aber die Vegaone Site am besten, ist aber natürlich alles Geschmackssache.

    Schöne Grüße aus KS

  12. Stadtpirat
    13. Oktober 2010 um 22:58 Uhr

    Von welcher Seite ist den Das Bild ganz oben, also ganz ganz oben?

    • Lennart Prange
      13. Oktober 2010 um 23:13 Uhr

      Falls du das Bild mit der Aufschrift :hover meinst: Das habe ich gemacht 😉

  13. Adham Dannaway
    30. November 2011 um 14:48 Uhr

    Thanks for the mention! 🙂

Trackbacks/Pingbacks