Das Schweben kann in CSS durch die Nutzung der `:hover` Pseudoklasse erreicht werden. Um einen Skalierungseffekt zu erzielen, wenn der Benutzer mit der Maus über ein Element fährt, kann die transform Eigenschaft genutzt werden.
Hier ist ein einfaches Beispiel:
```css
img:hover {
-webkit-transform: scale(1.1); /* für Safari und Chrome */
-moz-transform: scale(1.1); /* für Firefox */
-o-transform: scale(1.1); /* für Opera */
transform: scale(1.1); /* Standard Syntax */
}
```
In diesem Beispiel wird ein Bild beim Darüberfahren mit der Maus um 10% größer.
Beachten Sie, dass `transform: scale()` einen Wert von 1.0 für die Originalgröße des Elements und Werte größer als 1.0 für einen Vergrößerungseffekt annimmt. Werte zwischen 0.0 und 1.0 erzeugen einen Schrumpfungseffekt.
Auch können Sie verschiedene Werte für die X- und Y-Achse angeben, falls Sie das Element unproportional skalieren möchten:
```css
img:hover {
transform: scale(1.2, 1.5);
}
```
In diesem Beispiel wird das Bild in der Breite um 20% und in der Höhe um 50% vergrößert, wenn der Benutzer mit der Maus darüber fährt. Sollte ein fließender Übergang gewünscht sein, kann die `transition` Eigenschaft hinzugefügt werden:
```css
img {
transition: transform 0.3s ease-in-out;
}
img:hover {
transform: scale(1.1);
}
```
Nun wird das Bild innerhalb von 0.3 Sekunden linear auf 110% seiner ursprünglichen Größe vergrößert, sobald der Benutzer mit der Maus darüber fährt. Gleichzeitig wird es, wenn der Benutzer die Maus vom Bild weg bewegt, innerhalb von 0.3 Sekunden wieder auf seine ursprüngliche Größe zurückgesetzt.
