Benötigen Sie einen coolen Hover-Effekt für etwas auf Ihrer Website? Suchen Sie nicht weiter! Wir haben mehrere benutzerdefinierte Beispiele erstellt, die Sie zur Inspiration live betrachten können.
Wenn Sie den Effekt mögen, stehlen Sie ihn! Wir haben das CSS bereit und warten darauf, dass Sie es kopieren.
Bringen Sie Ihre langweilige Site zum Leben
Hover-Effekte können Ihre Website dynamischer und lebendiger machen. Es war früher der Fall, dass JavaScript für wirklich etwas interessantes mit einem Hover-Effekt erforderlich war, aber heutzutage ist CSS3 in der Lage, eine Menge wirklich cooles Zeug zu machen, wenn man genug erstellt.
Alle Effekte, die wir heute verwenden werden, verwenden Code, der von modernen Browsern unterstützt wird, was natürlich Mozilla und Webkit zum großen Teil bedeutet. Die IE-Unterstützung ist am besten für verschiedene Versionen fleckig. Testen Sie daher Ihre Implementierung gründlich. Fancy-Hover-Effekte sind eines der Dinge, die Sie normalerweise recht zart abbauen können, so dass ältere Browser immer noch Änderungen sehen.
Raufgehen
Live Demo: Klicken Sie hier, um zu starten
Dies funktioniert am besten, wenn Sie eine Reihe horizontaler Elemente haben. Wenn Sie mit der Maus darüber fahren, erhalten Sie einen schönen Welleneffekt.
Dieses ist sehr einfach zu implementieren und es gibt mehrere Möglichkeiten, es zu tun. Was ich unten gemacht habe, ist einfach einen Rand auf jedes Bild anzuwenden und dann den Rand beim Schweben zu reduzieren. Der Rand beginnt bei 15 Pixeln und reduziert sich beim Schweben auf nur 2 Pixeln, wodurch das Bild nach oben springt. Sie können diesen Effekt leicht auf Textelemente anwenden, wenn sie sich in einer Liste befinden.
Der Übergang ist hier völlig optional, da der Effekt auch ohne ihn recht gut funktioniert. Nur um es etwas weicher zu machen, obwohl ich ein schnelles Animations-Set einlegte, das sich herausstellte, was meiner Meinung nach die beste Wirkung für dieses Thema bot.
Bump Up CSS
Stack & Grow
Live Demo: Klicken Sie hier, um zu starten
Für dieses Bild wollte ich eine Art Lavalampeneffekt, so dass jedes Bild langsam vergrößert wird, wenn Sie mit der Maus auf der Liste nach unten fahren, und dann wieder auf seine ursprüngliche Größe zurückgesetzt wird.
Um dies zu erreichen, habe ich einen Stapel von Bildern eingefügt, die 400px breit und 133px groß waren. Diese Bilder habe ich dann im CSS mit 300px um 100px skaliert und den Schwebeflug erweitert. Da ich eine Mittenausrichtung hatte, wurde die Ausrichtung durch die neue Größe des Bilds verworfen. Ein negativer Rand, der auf die Hälfte des Wachstums in der Breite eingestellt war, befasste sich mit diesem Problem.
Stack & Grow CSS
Text einblenden
Live Demo: Klicken Sie hier, um zu starten
Für dieses wollte ich ein JavaScript-ähnliches Ereignis erstellen, bei dem Sie über einem Element schweben und einen Effekt auf ein anderes sehen können. Um dies zu erreichen, habe ich etwas Text und ein Bild in ein Div geschrieben und dann alles übrig gelassen, damit der Text mit dem Bild übereinstimmt. Als nächstes bewarb ich mich Farbe: transparent und Zeilenhöhe: 0px zum div. Dadurch wird der Text oben im div angezeigt und verborgen.
Damit der Text im Schwebeflug erscheint, habe ich einfach die Farbe und die Zeilenhöhe geändert. Wenn Sie den Mauszeiger über das Bild bewegen, zoomt der Text in die Ansicht! Es ist ein ziemlich toller Trick, wenn man bedenkt, dass alles CSS ist.
Text in CSS ausblenden
Gekrümmtes Foto
Live Demo: Klicken Sie hier, um zu starten
Dieses ist sehr einfach, aber es ist ein großartiger Effekt für eine Miniaturansicht-Galerie. Die Grundvoraussetzung ist, dass Sie ein Raster von Bildern erstellen und dann festlegen, dass die Bilder gedreht werden, wenn Sie mit dem Mauszeiger darüber fahren, wodurch die Illusion entsteht, dass ein schiefes Foto an der Wand hängt.
Wir werden eine Menge neueres, browserspezifisches CSS für dieses verwenden, so dass Sie möglicherweise auch etwas für ältere Browser hinzufügen möchten. Unsere Galerie verwendet Box-Schatten (optional), Übergänge und Transformationen, um den gewünschten Effekt zu erzielen. Die Transformation übernimmt die Rotation und der Übergang macht sie schön und glatt.
Um dies noch weiter zu machen, können Sie Pseudo-Selektoren verwenden, um die Bilder in verschiedene Richtungen zu neigen.
Crooked Photo CSS
Einblenden und nachdenken
Live Demo: Klicken Sie hier, um zu starten
Das hier ist ziemlich kompliziert, also musste ich ziemlich lange damit ringen, bevor ich einen Effekt fand, der mir gefiel. Der Standardzustand des Bildes hat eine leicht reduzierte Deckkraft.Wenn Sie den Mauszeiger darüber bewegen, wird die Deckkraft voll, ein Schein erscheint um die Ränder und eine Reflexion (nur Webkit) wird angezeigt.
Unglücklicherweise ist das Nachdenken nicht etwas, das auf einen Übergang anspricht, so dass es einfach direkt einfällt, während der Rest eingeblendet wird, aber es ist immer noch ein ziemlich schöner Übergang.
Wenn Sie sich nicht sicher sind, wie CSS-Reflektionen funktionieren, können Sie alles in einem großartigen Artikel von David Walsh nachlesen.
CSS einblenden und reflektieren
Fazit
Diese fünf Beispiele sollten ausreichen, um Sie zu inspirieren, Ihre eigenen CSS-Hover-Effekte zu erstellen. Denken Sie daran, mit diesen zu experimentieren, kombinieren Sie sie und fügen Sie Ihr eigenes Flair hinzu, um sie interessanter zu machen.
Wenn Sie coole Hover-Effekte im Web entdeckt haben, möchten wir sie sehen! Hinterlasse einen Kommentar und verlinke auf eine Seite mit einem Beispiel.