CSS Transition / Animation: Blend-Mode weich verändern

[Rolf B]

Hallo Killua,

bin aus dem Urlaub zurück und habe mal gespielt. Ich denke, Du möchtest (mit anderen Blendmodi) sowas:

Pseudo-Animation von Keyword-Eigenschaften

Es sind 3 Bilder:

1. Wald als Hintergrund
2. Rehe "regular" mit mix-blend-mode 1 und opacity 1
3. Rehe "hover" mit mix-blend-mode 2 und opacity 0

Die "regular"-Rehe sind mit z-index im Vordergrund, damit sie den :hover-Status bekommen können. Wenn das passiert, wird ihre Opacity auf 0 gesetzt. Da die "hover"-Rehe im DOM nachfolgen, kann ich den Geschwister-Kombinator verwenden, um den :hover der "regular"-Rehe in eine opacity:1 der "hover" Rehe umzusetzen.

Man kann das auch ohne z-index machen, dann kommt der :hover aber zu den "hover"-Rehen und man muss bei den "regular"-Rehen :has() verwenden, um zu erkennen, ob das nachfolgende Geschwisterelement gehovert wird.

Per transition-Angaben für die gemeinsame does-Klasse habe ich dann noch festgelegt, dass die opacity in 1s überblendet wird.

Und natürlich habe ich auch die Tastaturler bedacht und verarbeite :hover und :focus gleich.

Rolf