So erstellen Sie einen Bildüberlagerungseffekt auf den Schweber?

Das Einfügen von einfachen Bildern in Ihre Webseiten ist eine Möglichkeit, ihr Aussehen zu verbessern. Durch das Hinzufügen verschiedener Effekte zu Bildern können Sie jedoch Webseiten weiter verschönern und ein erstaunliches Benutzererlebnis schaffen. Eine interessante Kategorie von Effekten, die Sie den Bildern hinzufügen können, sind die Overlay -Effekte. Diese Effekte werden auf die Bilder platziert und zusammen mit einem Schwebeffekt verwendet. Daher erscheinen sie nur, wenn der Benutzer die Maus zum Bild bringt.

Die in diesem Beitrag diskutierten Arten von Effekten sind.

1. Verblassen
2. Schieben Sie die Oberseite
3. Schieben Sie den Boden
4. Nach links schieben
5. Rutschen nach rechts

Lassen Sie uns lernen, wie Sie diese mit Hilfe von Beispielen implementieren können.

Bevor wir uns zum Hinzufügen einer Bildüberlagerungseffektin zum Hinzufügen eines Bildes einfügen, fügen wir zunächst ein Bild auf unserer Webseite ein:

Html

Im obigen Code haben wir zwei Div -Container erstellt. Der erste Div -Container mit der Klasse „Div“ enthält das Bild sowie einen anderen Div -Container, der den Bildüberlagerungseffekt enthält, der auftaucht, wenn der Benutzer über dem Bild schwebt.

Ausgang

Ein Bild wurde erfolgreich auf der Webseite eingefügt.

Nachdem wir das Bild aufgenommen haben, werden wir lernen, wie Sie die verschiedenen Bildüberlagerungseffekte hinzufügen.

Fade Overlay -Effekt

Für den Zweck des Hinzufügens eines Fade -Overlay -Effekts auf das Bild folgen Sie dem folgenden Code.

CSS

.Bild
Breite: 250px;
Höhe: 250px;

.div
Position: Relativ;
Breite: 450px;

.Overlay
Position: absolut;
Übergang: alle 0.4s Leichtigkeit;
Deckkraft: 0;

.Div: Schwebe .Overlay
Deckkraft: 0.8;

.Fadeefect
Höhe: 250px;
Breite: 250px;
Top: 0;
Links: 100px;
Hintergrundfarbe: Whitesmoke;

Zunächst setzen wir eine Breite und Höhe des Bildes ein und passen die Position des ersten Div -Containers als relativ an, damit wir den zweiten Div -Container, der den Overlay -Effekt enthält, absolut positionieren können.

Nach der Positionierung der beiden Div -Behälter verwenden wir die Übergangs -Kurzeigeneigenschaft, um alle Elemente für eine Dauer von 0 einen Übergangseffekt zu erzielen.4 Sekunden in einer „einfachen“ Mode. In der Zwischenzeit wurde die Opazität vor dem Schwebeffekt auf 0 gesetzt, während der Benutzer die Opazität des Overlay -Effekts auf 0 festlegt.8.

Zuletzt geben wir dem Fade Overlay -Effekt eine gewisse Breite und Höhe. Die Bildbreite und Höhe vor und nach dem Auftragen des Overlays muss gleich sein, damit der Effekt genau auf dem Bild platziert wird. Außerdem haben wir die oberen und linken Eigenschaften verwendet, um den Effekt genau oben auf dem Bild zu positionieren und ihm eine weiße Rauchfarbe zugeordnet zu haben.

Ausgang

Ein verblassender Overlay -Effekt wurde mit Erfolg implementiert.

Schieben Sie den oberen Overlay -Effekt

Betrachten Sie den folgenden Code, um zu verstehen.

CSS

.Bild
Breite: 250px;
Höhe: 250px;

.div
Position: Relativ;
Breite: 450px;

.Overlay
Position: absolut;
Übergang: alle 0.4s Leichtigkeit;
Deckkraft: 0;

.Div: Schwebe .Overlay
Deckkraft: 0.8;

.Slidetopeffect
Breite: 250px;
Höhe: 0;
Top: 0;
Rechts: 100px;
Hintergrundfarbe: Whitesmoke;

.Div: Schwebe .Slidetopeffect
Höhe: 250px;

Der Stil und die Position der Div -Behälter und des Bildes sind gleich wie die Anpassung der Deckkraft des Schwebeffekts.

Für den Zweck des Hinzufügens eines Schleifschleitschiebers -Top -Overlay -Effekts dem Bild haben wir die Breite des Overlay -Effekts wie die Breite des Bildes festgelegt und um sie auf das Bild zu platzieren, haben wir die oberen und rechten Eigenschaften verwendet. Um den Effekt von oben zu schieben, haben wir die Höhe des Overlay -Effekts vor dem Schwebeeffekt auf Null angepasst. Sobald der Benutzer die Maus über das Bild bringt.

Ausgang

Ein Schieber -Top -Overlay -Effekt, der mit großer Leichtigkeit erzeugt wird.

Schieberboden -Overlay -Effekt

Im Folgenden haben wir Ihnen den Code bereitgestellt, mit dem wir einen Folge -Bottom -Overlay -Effekt auf das Bild hinzufügen werden.

CSS

.Bild
Breite: 250px;
Höhe: 250px;

.div
Position: Relativ;
Breite: 450px;

.Overlay
Position: absolut;
Übergang: alle 0.4s Leichtigkeit;
Deckkraft: 0;

.Div: Schwebe .Overlay
Deckkraft: 0.8;

.SlideBottomeffect
Höhe: 0;
Breite: 250px;
unten: 3px;
Links: 100px;
Hintergrundfarbe: Whitesmoke;

.Div: Schwebe .SlideBottomeffect
Höhe: 300px;

Der Rest des Codes ist der gleiche wie im obigen Beispiel verwendet. Um den Effekt auf den Bild zu platzieren als das Bild auf dem Schwebe.

Ausgang

Der Folienboden -Overlay -Effekt wurde erfolgreich hinzugefügt.

Schieben Sie den linken Overlay -Effekt

Wenden Sie sich an den folgenden Code, um einen linken Überlagerungs -Effekt des Diagramms auf das Bild hinzuzufügen.

CSS

.Bild
Breite: 250px;
Höhe: 250px;

.div
Position: Relativ;
Breite: 450px;

.Overlay
Position: absolut;
Übergang: alle 0.4s Leichtigkeit;
Deckkraft: 0;

.Div: Schwebe .Overlay
Deckkraft: 0.8;

.Slidelefteffect
Höhe: 250px;
Breite: 0;
Top: 0;
Links: 100px;
Hintergrundfarbe: Whitesmoke;

.Div: Schwebe .Slidelefteffect
Breite: 250px;

Zum Zweck des Hinzufügens eines linken Überlagerungseffekts des Schieben. Um den Effekt auf das Bild korrekt zu positionieren, haben wir die oberen und linken Eigenschaften verwendet. Und schließlich wurde nach dem Schwebeffekt die Breite auf 250px eingestellt, was der Breite des Bildes entspricht.

Ausgang

Der linke Effekt der gleitenden Folie funktioniert ordnungsgemäß.

Schieben Sie den rechten Überlagerungseffekt

Der letzte Overlay -Effekt, den wir demonstrieren werden. Folgen Sie dem folgenden Code.

CSS

.Bild
Breite: 250px;
Höhe: 250px;

.div
Position: Relativ;
Breite: 450px;

.Overlay
Position: absolut;
Übergang: alle 0.4s Leichtigkeit;
Deckkraft: 0;

.Div: Schwebe .Overlay
Deckkraft: 0.8;

.SliderIGHTEffect
Höhe: 250px;
Breite: 0;
Top: 0;
Rechts: 100px;
Hintergrundfarbe: Whitesmoke;

.Div: Schwebe .SliderIGHTEffect
Breite: 250px;

So erstellen Sie einen Folien -Rechten -Overlay -Effekt auf das Bild. Bei der Zugabe des Schwebeffekts wurde die Breite jedoch auf 250px eingestellt, die dem des Bildes ähnlich sind.

Ausgang

Ein Folie rechts Overlay -Effekt wurde erfolgreich zum Bild hinzugefügt.

Abschluss

Zum Zweck des Hinzufügens von Overlay -Effekten zu Bildern müssen Sie sie in einen DIV -Behälter platzieren und verschiedene CSS -Eigenschaften verwenden, um Overlay -Effekte auf sie hinzuzufügen. Das Hinzufügen dieser Auswirkungen zu Bildern kann eine interessante Möglichkeit sein, die Schönheit der Webseiten zu verbessern. Es gibt mehrere Overlay -Effekte, die Sie zu Ihren Bildern hinzufügen können, z. Diese Effekte können mit verschiedenen CSS -Eigenschaften hinzugefügt werden. In diesem Artikel wird gezeigt.