10 Einfache Bild-Hover-Effekte, die Sie kopieren und einfügen können

Hover-Effekte sind immer ein unterhaltsames Thema. In der Vergangenheit haben wir einige großartige Beispiele für CSS-Hover erstellt, die einfach kopiert und in Ihren Code eingefügt werden konnten.

Heute folgen zehn neue Effekte, die speziell für die Verwendung mit Bildern entwickelt wurden. Jedes Beispiel enthält ein HTML- und CSS-Snippet, das Sie stehlen können, und eine Live-Demo, damit Sie es in Aktion sehen können.

Vorgeschmack

Bevor wir anfangen, werfen Sie einen Blick auf die Demo unten, um die verschiedenen Hover-Effekte zu sehen, die wir bauen werden.

Demo: Klicken Sie hier, um zu starten.

Konfiguration

Bevor wir mit der Erstellung der einzelnen Demos beginnen, sind einige grundlegende Einstellungen erforderlich. Hier ist ein Teil von CSS, mit dem wir das grundlegende Erscheinungsbild aller Beispiele bestimmen.

* {-webkit-box-size: border-box; -moz-box-dimensionierung: border-box; -ms-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; } body {Hintergrund: # 333; } .pic {border: 10px solid #fff; Schwimmer: links; Höhe: 300px; Breite: 300px; Marge: 20px; Überlauf versteckt; -webkit-box-shadow: 5px 5px 5px # 111; Box-Schatten: 5px 5px 5px # 111; }

Das meiste davon ist grundlegend: Mit Box-Sizing können wir das Box-Modell manipulieren (wenden Sie sich genauer an, wenn Sie den Universal-Selector nicht mögen), und die pic-Klasse gibt uns einen Platz, in dem Sie generisches Styling verwenden können jedes foto.

Zoomen und Schwenken

Unsere erste Gruppe von Effekten besteht in der Verwendung einiger Tricks mit verstecktem Überlauf. Indem wir das Bild an die Grenzen eines div ausschneiden, können wir ziemlich coole Schwebeflugzeuge machen.

Hier ist eine Demo der vier Hover-Effekte in Aktion:
Demo: Klicken Sie hier, um zu starten.

Wachsen

Zu Beginn machen wir es so, dass das Foto vergrößert wird, wenn der Benutzer über dem Bild schwebt, während es innerhalb seiner Grenzen bleibt, was zu einer Vergrößerung führt. Hier ist das HTML.

HTML

<img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_4.jpg"> <p>Wir haben gesehen, wie man ein Bild im Schwebeflug vergrößert, also diesen Effekt umkehren und das Foto herauszoomen. Die Methode ist ziemlich genau dieselbe, nur dass Sie dieses Mal mit der Größe bei 400px beginnen und sie im Hover auf 300px verkleinern. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_5.jpg"> <p>Mit dem nächsten Effekt bleibt das Bild überall gleich, schwenkt jedoch beim Schweben des Benutzers seitlich. Wie Sie in unserem Kick-Beispiel sehen können, ist dies eine großartige Möglichkeit, Handlungsgefühl zu vermitteln.</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_6.jpg"> <p>Eine vertikale Pfanne kann auch cool sein. Ich benutze diesen Effekt noch einmal, um ein Gefühl der Bewegung zu vermitteln. Dies ist jedoch auch für die Kommunikation der Höhe von Vorteil, wenn Sie so etwas wie ein hohes Gebäude schwenken möchten. Die Klippe in unserem Foto hilft, dieses Konzept voranzutreiben. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_7.jpg"> <h3>Neigung</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_8.jpg"> <p>Dies ist sehr einfach. Alles, was wir tun werden, ist, das Bild leicht zu drehen, wenn der Benutzer darüber fährt. Das Ergebnis ist eine grundlegende, aber lustige Illusion eines krumm hängenden Bildes. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_9.jpg"> <p>Hier kommt der Wahnsinn ins Spiel. Das Bild oben macht dieses eine Gerechtigkeit nicht wirklich, also schau dir die Demo an. Was passiert ist, wenn sich der Benutzer bewegt, beginnt sich das Bild zu drehen. Während es sich dreht, verwandelt es sich von einem Quadrat in einen Kreis. Das Ergebnis macht sehr viel Spaß beim Spielen. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_10.jpg"> <p>Hier ist ein weiterer seltsamer, der das Bild mit einem Randradius abrundet. Dieses Mal erhöhen wir jedoch nicht nur den Radius der Grenze, sondern auch deren Dicke. Kombiniert mit dem <em>Border-Box</em>Dadurch wird ein Effekt erzeugt, der sich auf einen bestimmten Teil eines Bildes konzentriert. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_11.jpg"> <h3>Verwischen</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_12.jpg"> <p>Der erste Effekt, den wir anstreben, ist eine einfache Unschärfe. Lange hat man versucht, Pixel nur mit CSS zu verwischen, und jetzt ist es endlich mit einer kleinen Codezeile möglich!</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_13.jpg"> <p>Diesmal werden wir die gesamte Sättigung aus dem Bild beim Schweben entfernen. Früher waren zwei Bilder erforderlich, um diesen Effekt zu erzielen, aber mit Webkit-Filtern können wir diesen Wert auf eins reduzieren. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_14.jpg"> <p>Für unseren letzten Trick werden wir ein Foto standardmäßig dunkler machen und es dann im Hover-Modus auf den normalen Zustand bringen. Dies erzeugt eine Art von Effekt. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/http://lorempixel.com/300/300/technics/2"> / * DARKEN * / .helle img {-webkit-filter: Helligkeit (-65%); -webkit-Übergang: alles ist leicht; -Moz-Übergang: alle 1s Leichtigkeit; -o-Übergang: alle 1s Leichtigkeit; -ms-Übergang: alles ist leicht; Übergang: alle 1s Leichtigkeit; } .brighten img: hover {-webkit-filter: Helligkeit (0%); }

Hier ist 0% normale Helligkeit. Alles darüber und du heller das Bild, alles darunter und du verdunkelst es. Wir begannen bei -65% und erreichten den Schwebezustand auf 0%.

Stehle sie!

Die obigen Beispiele sind alle für Sie gedacht, damit Sie sie stehlen und in Ihrer eigenen Arbeit verwenden können. Markieren Sie also diese Seite mit einem Lesezeichen und kehren Sie das nächste Mal zurück, wenn Sie nach einem interessanten CSS-Hover-Effekt suchen.