Vergrößern des Hintergrundbildes on Hover
In diesem Blogbeitrag werden wir uns ansehen, wie man mit CSS die Größe eines Hintergrundbilds in eines bestimmten Abschnitts einer Website bei Hover vergrößert. Dies kann dazu beitragen, bestimmte Inhalte hervorzuheben und die Benutzererfahrung zu verbessern.
Dies erreichst du mit folgendem Code:
section[data-section-id="63d157bafdda413e461784c0"]:hover .section-background img { transform: scale(2.0) !important; transition: all ease-in-out 1.5s !important; }
Der erste Teil des Codes definiert den Abschnitt, auf den sich die Regel bezieht: section[data-section-id="63d157bafdda413e461784c0"]:hover (Wie du die Data-Section-ID herausfindest, siehst du hier).Dieser CSS-Selektor sucht nach einem Abschnitt mit einer bestimmten data-section-id-Eigenschaft und legt die Regel nur dann fest, wenn der Mauszeiger über dem Abschnitt schwebt.
Der nächste Teil des Codes legt das Ziel der Regel fest: .section-background img. Dies ist der CSS-Selektor für das Hintergrundbild, das vergrößert werden soll.
Der letzte Teil des Codes legt die Regeln für die Transformation und Übergang fest: transform: scale(2.0) !important; transition: all ease-in-out 1.5s !important;. Die transform-Eigenschaft verwendet den scale()-Befehl, um die Größe des Hintergrundbilds um den Faktor 2 zu vergrößern. Die transition-Eigenschaft legt die Geschwindigkeit der Animation auf 1.5 Sekunden und die Art der Animation auf ease-in-out fest.
Insgesamt ermöglicht dieser Code einen einfachen Weg, um ein Hintergrundbild in einem bestimmten Abschnitt deiner Squarespace Website bei Hover zu vergrößern. Dies kann dazu beitragen, bestimmte Inhalte hervorzuheben und die Benutzererfahrung zu verbessern. Der Code kann leicht angepasst werden, um die Größenvergrößerung, die Übergangsgeschwindigkeit und andere Aspekte der Animation anzupassen.