Oktober 2021
Passend zum anstehenden Tage haben wir für euch einen schaurigen Hovereffekt für ein Element vorbereitet, welches sich p...
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.
Opacity
Die Transparenz eines Objektes. 0 Bedeutet hierbei unsichtbar und 1 wäre komplett sichtbar.
Die Transparenz eines Objektes. 0 Bedeutet hierbei unsichtbar und 1 wäre komplett sichtbar.
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.
