10 CSS-Bibliotheken für bessere Image-Hover-Effekte

Benutzer lassen einfach und klar wissen, welcher Teil der Webseite anklickbar ist ist ein wichtiger Teil des UX-Designs. Die alte, aber goldene Methode war, die Textfarbe zu ändern und sie zu unterstreichen. Heutzutage gibt es mit CSS viel mehr Möglichkeiten, Hover-Effekte insbesondere für Bilder bereitzustellen.

Entwickler können jetzt Fügen Sie Übergangseffekte oder Animationen hinzu, wenn ein Hover-Ereignis ausgelöst wird. Wir betrachten gerichtete Folien, Zooms mit verschiedenen Geschwindigkeiten, Ein- und Ausblendungen, Scharniereffekte, Scheinwerferlichter, Wackeln, Sprünge und mehr.

In dieser Zusammenstellung gibt es mehr als 250 Hover-Effekte dich inspirieren Sie können den Code auch an der Quelle abholen.

Bild-Hover-Effekte (16 Effekte)

Auf dieser Seite finden Sie eine schöne Sammlung von 16 Hover-Bildern mit Bildunterschriften. Schnappen Sie sich den HTML- und CSS-Code für jeden Effekt, indem Sie den Mauszeiger über die Bilder bewegen und dann auf klicken Code anzeigen.

Bildunterschrift Hover-Animation (4 Effekte)

Hier sind 4 coole Beschriftungs-Animationen, die ausgeführt werden, wenn eine über dem Bild angezeigt wird. Die Effekte werden mit reinen CSS3-Übergängen und Transformationen und ohne JavaScript erstellt, um die Kompatibilität mit allen Browsern zu verbessern.

iHover (35 Effekte)

iHover ist eine Sammlung von Hover-Effekten, die von CSS3 unterstützt werden. Es gibt 20 Hover-Effekte und 15 Square-Hover-Effekte. Um die Effekte verwenden zu können, müssen Sie HTML-Markup schreiben und die CSS-Dateien einschließen.

Bild-Hover (44 Effekte)

Diese Bibliothek enthält 44 mit reinem CSS erstellte Effekte. Einige der Effekte umfassen Überblenden, Schieben, Schieben, Scharniere, Dubletten, Zoomen, Unschärfen, Flips, Falten und Blenden in mehrere Richtungen. Es gibt eine erweiterte Version von 216 Effekten, die für 14 € erworben werden kann.

Hover-Effekt-Ideen (30 Effekte)

Diese Image-Hover-Demo von Codrop gibt Ihnen Inspiration, wenn Sie sanfte Übergänge zwischen Bildern und Bildunterschriften machen. Es gibt insgesamt 30 Effekte auf zwei Sets mit Tutorials und dem Quellcode.

Hover-CSS (108 Effekte)

Mit Hover-CSS können Sie jedem Element Hover-Effekte hinzufügen, z. B. Schaltflächen, Links oder Bilder. Zu den Effekten gehören 2D-Übergänge, Hintergrundübergänge, Rahmen-, Schatten- und Glühenübergänge und mehr. Die Bibliothek ist in CSS, Sass und LESS verfügbar.

Animatismus (100+ Effekte)

Es gibt mehr als 100 Bild-Hover-Animationen für Schaltflächen, Overlays, Details, Bildunterschriften, Bilder und Social Media-Schaltflächen. Alle Effekte werden von CSS3 unterstützt.

Beschriftung Hover-Effekt (7 Effekte)

Es gibt 7 verschiedene Effekte in dieser Sammlung. Alle Übergänge sehen sehr schön und glatt aus. Im Tutorial-Abschnitt erfahren Sie, wie Sie diese Effekte auf Ihr Projekt anwenden.

CSS-Bild-Hover-Effekte (15 Effekte)

Eine Sammlung einfacher Hover-Effekte wie Zoom, Dia, Drehen, Graustufen, Unschärfe, Deckkraft und andere grundlegende Effekte. Sie können diese Effekte verwenden, indem Sie die CSS-Klasse vor Ihrer hinzufügen Zahl Etikett.

Richtungsabhängiger 3D-Hover-Effekt

Dies ist ein super cooler Hover-Effekt, der Ihre letzte Mausbewegung erkennt. Die Bildunterschriften werden je nach Ihrer letzten Cursorposition aus einer von vier Richtungen geöffnet.

Hover-Animation

Hier ist eine von UNIQLO inspirierte Border-Hover-Animation. Bei einem Hover-Ereignis wird der Rand des Bildes animiert.

Kacheln mit animiertem Hover

Eines für Fliesendesigns, darunter langsamer Zoom, Folien, Pop-Ins und gedimmte Überlagerung.

SVG-Clip-Path-Hover-Effekt

Ein super genialer Röntgenstrahleffekt-Bild-Hover-Effekt von SVG Clip-Pfad und CSS-Übergänge. Funktioniert gut mit Chrome, Opera und Safari.