Für ausgefallene Animationen, bei denen man mit der Maus über Bilder fährt, war früher JavaScript erforderlich. Nicht mehr! CSS dient dazu, Ihre Miniaturansichten und Galerien zu beleben.
Bild-Hover-Effekte können Ihrer Website ein zusätzliches Maß an Glanz verleihen. Sie erzeugen einen flüssigen Effekt und machen die Navigation durch Bildergalerien oder Karussells angenehmer. Das Beste daran ist, dass Sie diese Effekte nur mit CSS und ohne JavaScript erstellen können.
Sie können für Ihre Bilder verschiedene Animationsstile erstellen. Dazu gehören das Verwischen oder Vergrößern des Hintergrunds, das Einblenden oder Verschieben des Textes sowie das Ändern der Hintergrundfarbe.
Erstellen des HTML für die Bilder
Beginnen Sie mit der Erstellung eines index.html Datei in einem leeren Ordner auf Ihrem Computer und öffnen Sie die Datei dann mit einem Texteditor. Erstellen Sie in der Datei das HTML-Gerüst und fügen Sie das folgende Markup in die öffnenden und schließenden Body-Tags ein:
<divKlasse="Netz">
<divKlasse=„image-wrapper“>
<BildKlasse="verwischen"src=" https://picsum.photos/500?random=1"alt=""><divKlasse=„Inhalt verblasst“>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta-Werbung
sed bei amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divKlasse=„image-wrapper“>
<BildKlasse=„Zoom-Unschärfe“src=" https://picsum.photos/500?random=2"alt=""><divKlasse=„Inhalt verblasst“>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta-Werbung
sed bei amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divKlasse=„image-wrapper“>
<BildKlasse="verwischen"src=" https://picsum.photos/500?random=3"alt=""><divKlasse=„Inhalt nach links schieben“>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta-Werbung
sed bei amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divKlasse=„image-wrapper“>
<BildKlasse="grau"src=" https://picsum.photos/500?random=3"alt="">
<divKlasse=„Inhalt nach links schieben“>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta-Werbung
sed bei amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Dies ist ein Rastercontainer mit vier Bild-Wrappern. Die div-Elemente mit dem Bild-Wrapper Die Klasse dient als Wrapper für das Bild und den entsprechenden Text. Dem Bild und Inhalt jedes Abschnitts wird ein einzigartiger Satz von Klassen hinzugefügt.
Im Stylesheet finden Sie Folgendes Zielen Sie auf diese Elemente anhand ihrer Klassennamen und wenden Sie die verschiedenen Styling- und Animationseffekte an. Der Text wird standardmäßig nicht angezeigt; Sie zeigen es nur an, wenn Sie mit der Maus über den Bild-Wrapper fahren, und das Bild erfährt dabei unterschiedliche Effekte.
Grundlegendes CSS hinzufügen
Nachdem Sie den HTML-Code erstellt haben, ist es an der Zeit, ihn mit CSS zu formatieren. Ein... kreieren style.css Datei und verlinken Sie auf dieses Stylesheet aus Ihrer HTML-Datei, innerhalb der Abschnitt:
<Verknüpfungrel=„Stylesheet“href=„style.css“>In deinem style.css Datei müssen Sie als Erstes den Rand am Körper auf Null zurücksetzen und einen unteren Rand festlegen:
Körper {
Rand: 0;
Rand unten: 20rem;
}Als nächstes müssen Sie den äußersten Behälter in einen verwandeln CSS-Raster, mit dem Sie Elemente in zwei Dimensionen anordnen können. Der folgende Code erstellt ein Raster mit so vielen Spalten oder Zeilen, wie hineinpassen. Die Mindestgröße jeder Spalte beträgt 300 Pixel und die Höchstgröße beträgt 1 Bruchteil des Containers:
.Netz {
Anzeige: Netz;
Rastervorlagenspalten: wiederholen(automatisch anpassen, Minimal Maximal(300px, 1fr));
}Da Sie den Text relativ zu seinem Container positionieren möchten, müssen Sie die Position relativ zum Bild-Wrapper festlegen:
.image-wrapper {
Position: relativ;
Überlauf: versteckt;
}
Der nächste Schritt besteht darin, das Bild zu gestalten. Zeigen Sie das Bild als Blockelement an, überspannen Sie die Breite des gesamten Containers und platzieren Sie es passend in der Mitte des Containers:
.image-wrapper > Bild {
Anzeige: Block;
Breite: 100%;
Seitenverhältnis: 1 / 1;
Objektgerecht: Abdeckung;
Objektposition: Center;
}
Positionieren Sie den Text zentral und geben Sie ihm eine transparente, hellgraue Hintergrundfarbe:
.image-wrapper > .Inhalt {
Position: absolut;
Einsatz: 0;
Schriftgröße: 2rem;
Polsterung: 1rem;
Hintergrund: rgba(255, 255, 255, .4);
Anzeige: biegen;
align-items: Center;
Rechtfertigungsinhalt: Center;
}
Speichern Sie die CSS-Datei und öffnen Sie sie index.html in Ihrem Browser. Sie sollten eine Seite finden, die der im Bild unten ähnelt.
Den Übergang für Bilder und Texte festlegen
Nachdem Sie nun die grundlegenden Stile auf die Bilder angewendet haben, besteht der nächste Schritt darin, ihnen etwas Animation hinzuzufügen. Fügen Sie zunächst einen Übergang zu beiden Bildern und dem entsprechenden Text hinzu:
.image-wrapper > Bild,
.image-wrapper > .Inhalt {
Übergang: 200MSEinfaches Ein- und Aussteigen;
}
Das bedeutet, dass alle Übergangseffekte (d. h. Einblenden, Zoomen und Unschärfe) 200 Millisekunden dauern und die gleiche Zeitkurve haben.
Einblend- und Unschärfeanimation
Der erste Animationsstil ist das Einblenden des Textes. Wenn Sie mit der Maus über einen bestimmten Bild-Wrapper fahren, wird der Inhalt angezeigt, der das enthält verblassen Auf die Klasse wird dieser Effekt (Ein- und Ausblendanimation) angewendet. Dies erreichen Sie, indem Sie die Deckkraft auf Null setzen und auf Eins ändern, wenn sich die Maus über einem bestimmten Bildwrapper bewegt:
.image-wrapper > .Inhalt.verblassen {
Opazität: 0;
}
.image-wrapper:schweben > .Inhalt.verblassen {
Opazität: 1;
}
Wenn Sie die Datei speichern und Ihren Browser überprüfen, sehen Sie, dass die Einblendanimation aktiv ist. Möglicherweise stellen Sie jedoch auch fest, dass der Text etwas schwer lesbar ist (wenn das Bild stark ist und viel Kontrast aufweist). Denken Sie daran, dass alle Bilder auch einen Klassennamen haben verwischen. Dies dient dazu, die Bilder unscharf zu machen, um den dringend benötigten Kontrast zwischen ihnen und dem Text hinzuzufügen:
Bild-Wrapper:schweben > Bild.verwischen {
Filter: verwischen(5px)
}
Wenn Sie nun mit der Maus über das Bild fahren, können Sie sehen, dass es nur noch unscharf wird. Sie können den Pixelwert erhöhen, um die Unschärfe auf den Bildern stärker hervorzuheben und so mehr Kontrast zwischen der Unschärfe und dem Text zu schaffen.
Andere Effekte hinzufügen
Die anderen Effekte sind das Verschieben des Textes von links, das Zoomen des Bildes und das Hinzufügen von Graustufen zum Bild. Hier ist der Code zum Erreichen aller drei Effekte:
.image-wrapper > .Inhalt.slide-left {
verwandeln: TranslateX(100%)
}.image-wrapper:schweben > .Inhalt.slide-left {
verwandeln: TranslateX(0%)
}.image-wrapper:schweben > Bild.grau {
Filter: Graustufen(1)
}.image-wrapper:schweben > Bild.verwischen {
Filter: verwischen(5px)
}
.image-wrapper:schweben > Bild.Zoomen {
verwandeln: Skala(1.1)
}
Speichern Sie die Datei, gehen Sie dann zu Ihrem Browser und bewegen Sie den Mauszeiger über jedes Bild. Sie sollten die verschiedenen Effekte in Aktion sehen.
Um die Slide-In-Effekte zu vervollständigen, können Sie drei weitere Bild-Wrapper erstellen, die jeweils ein Bild und Text enthalten. Jeder Textabschnitt hätte den Klassennamen Hochschieben, herunterrutschen, oder leicht-rechts. Dann würden Sie den richtigen Wert übergeben Pixel, em oder rem, im Inneren verwandeln() Funktion, um alle drei Effekte zu erzeugen.
CSS Grid und Flexbox
CSS Grid und Flexbox sind zwei Funktionen, mit denen Sie fantastische Layouts für Ihre Website erstellen können. Sie können praktisch jedes gewünschte Layout ganz einfach erstellen und die Zeilen und Spalten nach Ihrem Geschmack anpassen. Die Spalten werden standardmäßig auch responsiv sein. Wenn Sie lernen, wann Sie das eine über das andere verwenden, werden Sie ein Top-1-Prozent-CSS-Entwickler.