Weihnachtlicher Hover-Effekt

Nach dem Vorbild an unserem Post mit Halloweenthematik (https://nrml.de/blog/happy-halloween) haben wir nun passend zu den anstehenden Feiertagen einen Hovereffekt mit Weihnachtsthematik gebastelt. Wollt ihr also eure Webseite an die aktuelle Jahreszeit anpassen, könnte dies genau das Richtige sein.

Versuche es ruhig und klicke auf einen der Links! 

Um diesen Effekt zu erreichen, haben wir ein Div-Element erstellt und in dieses als Hintergrund das Bild im Normalzustand eingefügt. Darüber wurden drei kleinere Boxen erstellt. Diese beinhalten jeweils eine der drei veränderten Socken und haben eine Opacity von 0.

Nun müssen diese Boxen nur genau an den Stellen platziert werden, wo sie sich fehlerfrei in das Bild einfügen. Ändert man nun beim Hovern die Opacity auf 1, wirkt es als wird der Inhalt der Socke herausgezogen.

By accepting you will be accessing a service provided by a third-party external to https://nrml.de/