So zoomen Sie ein Bild auf der Mausschwebede mit CSS

Das CSS “ÜbergangDie Eigenschaft wird verwendet, um Effekte auf die verschiedenen HTML -Elemente hinzuzufügen, z. B. die Veränderung der Breite, der Größe, der Größe und der Position der Elemente. Durch die Verwendung dieser Eigenschaft können Sie auch ein Bild auf der Mauszeiger mit der Kombination aus Transformationseigenschaften und: Hover-Pseudo-Klasse-Element zoomen.

Der Zweck dieses Artikels besteht darin, Ihnen das Verfahren beizubringen, ein Bild auf einem Mausbeweg zu zoomen. So lass uns anfangen!

So zoomen Sie ein Bild auf der Mausschwebede mit CSS?

Der "Übergang" Und "verwandeln”Eigenschaften von CSS werden zum Zoomen eines Bildes auf einem Mausschwebede verwendet. Bevor wir in die Implementierung einsteigen, werden wir die genannten Eigenschaften nacheinander diskutieren!

CSS -Übergangseigenschaft

Der "ÜbergangDie Eigenschaft wird verwendet, um den Wert von CSS -Eigenschaften wie Breite, Höhe, Opazität und Transformation innerhalb eines bestimmten Zeitraums zu ändern. Es ist ein Kurzeigeneignis von vier anderen Immobilien.

Schauen Sie sich die Syntax der Übergangseigenschaft an.

Syntax

Übergang: Übergangsübertragungsdauer
Übergangs-Timing-Funktion Transition-Delay

Die Beschreibung der oben genannten Eigenschaften ist unten angegeben:

• Übergangs-Property: Es wird verwendet, um den Übergang zu einer CSS -Eigenschaft wie Breite, Höhe, Deckkraft, Transformation und vielem mehr zu setzen.

• Übergangszeit: Es wird verwendet, um die Dauer des Übergangs anzupassen.

• Übergangs-Timing-Funktion: Es wird verwendet, um die Geschwindigkeit des Übergangs einzustellen.

• Übergangsdelay: Es gibt an, wann der Übergang beginnt oder verzögert.

CSS "Transformation" -Sache

Für die 2D- und 3D -Transformation von HTML -Elementen wird die Eigenschaft „Transformation“ von CSS verwendet. Durch die Verwendung dieser Eigenschaft können Sie die Form und Größe der Elemente ändern. Es ermöglicht auch ein Element, sich zu drehen, zu schießen und zu skalieren.

Syntax

Die Syntax der “verwandelnEigentum ist:

Transformation: Keine | Transformationsfunktionen

Die Beschreibung der Transformationseigenschaft ist unten angegeben:

• keiner: Es wird verwendet, um keine Transformation der Elemente festzulegen.

• Transformationsfunktion: Es wird verwendet, um die Funktion der Transformationseigenschaft wie rotate (), scew (), translate () und scale () festzulegen. Darüber hinaus verändert die Funktion Scale () das Element in horizontalen und vertikalen Richtungen.

Beispiel 1: Zoomen Sie ein Bild auf Mausbewegung

Um ein Bild auf einem Mausschwebede zu zoomen, fügen Sie zunächst ein Bild in das HTML hinzu und wenden Sie dann den Schwebeffekt darauf an.

Schritt 1: Bild in Div hinzufügen

Um ein Bild auf der Mausschwebede mit CSS zu vergrößern, werden wir zunächst ein Bild in die “hinzufügendiv”. Verwenden Sie dazu das Tag und setzen Sie die Quelle des Bildes als "Bild.PNG ” in der .

Html

Schritt 2: Stil Div

In CSS werden wir verwenden “div"Um auf das Div zuzugreifen, das wir in HTML erstellt haben, stellen Sie die Höhe der Div als" als "fest"250px"Und die Hintergrundfarbe als"RGB (134, 240, 227)”. Darüber hinaus werden wir den Rand um die DIV anpassen, indem wir die Breite als festlegen "10px", Stil als "Ridge" und Farbe als "RGB (2, 141, 127)".

CSS

div
Höhe: 250px;
Hintergrund: RGB (134, 240, 227);
Grenze: 10px Ridge RGB (2, 141, 127);

Schritt 3: Stellen Sie die Position des Bildes fest und wenden Sie die Eigenschaft "Übergang" an

Stellen Sie im nächsten Schritt die Position des Bildes an, indem Sie die Polsterung verwenden "80px" und "160px". Wir werden die Breite als "verwenden"150px”Um die Größe des Bildes anzupassen. Wenden Sie danach die Übergangseigenschaft auf das Bild an, indem Sie den Wert der Übergangseigenschaft als „Transformation“ und die Übergangsdauer als “festlegen0s”:

img
Polsterung: 80px 160px;
Breite: 150px;
Übergang: transformieren 0s;

HINWEIS: Die Werte der Polsterung werden als "festgelegt"80px"Repräsentiert die Polsterung von oben und unten und"160px”Zeigt die Polsterung von links und rechts an.

Schritt 4: Vergrößern Sie ein Bild mit der Eigenschaft „Transformation“ auf Schwebedecke

Jetzt werden wir verwenden “.IMG: Schwebe”Um das Bild mit dem Hover Pseudo-Klasse-Element zu verknüpfen. Infolge. Als nächstes werden wir die Transformationseigenschaft nutzen und den Wert der Skalierungsfunktion als "als" als "als" als "als" als "als" als "vergrößern(1.9)”Um das Bild sowohl in horizontalen als auch in vertikalen Richtungen zu ändern:

IMG: Hover
Transformation: Skala (1.9);

Wie Sie sehen können, dass das Bild gezoomt wird, wenn die Maus darüber hinweg ist:

Wechseln wir zum nächsten Beispiel, in dem wir ein GIF für Mausbewegung zoomen werden.

Beispiel 2: Zoomen Sie ein GIF auf Mausbeschwebe

Erstens werden wir mit dem Tag ein GIF in die HTML hinzufügen und seine GIF -Quelle als “angebenGIF.GIF”:

Wir werden das Div genauso wie das vorherige Beispiel stylen. Setzen Sie danach die Position des GIF mit der Polsterung als "50px" Und "200px”:

img
Polsterung: 50px 200px;
Breite: 150px;
Übergang: transformieren 0s;

Als nächstes werden wir benutzen “IMG: Schwebe"Und setzen Sie den Wert der Skalierungsfunktion als" als "1.6”:

IMG: Hover
Transformation: Skala (1.6);

Damit wird das GIF beim Maus einhergeht:

Das ist es! Wir haben die Methode zum Zoomen eines Bildes auf Mausbewegung erörtert.

Abschluss

Ein Bild auf einem Mauszeiger zoomen "Übergang" und "Transformation" Eigenschaften von CSS werden verwendet. Wenden Sie zunächst die Übergangseigenschaft auf das Bild an und setzen Sie den Wert als Transformation fest. Dann in der ":schweben”Pseudo-Klasse-Element, verwenden Sie die Transformationseigenschaft und setzen Sie den Wert der Skala () -Funktion. In diesem Handbuch haben wir die Methode gelernt, um ein Bild auf der Mausschwebede mit CSS zu zoomen und Beispiele dafür zu geben.