Überlappende ce_image mit :hover und z-index Fade-Effect

Weil ich's die Tage für ein Webprojekt benötigt habe, und ich die Umsetzung gerne auch bereit stelle ...

Aufgabe:
- zwei Bilder, die übereinander versetzt dargestellt werden
- bei :hover am "hinteren" Bild soll dieses in den Vordergrund rücken, aber mit fade-Effect
- vorhandene Boardmittel sollen soweit es möglich ist verwendet werden

Recherge:
- für den fade-Effect kann 'transition' eingesetzt werden
- z-index bei :hover ändern ist machbar, einfach umzusetzen, aber es wirkt kein 'transition'
- z-index mit transition ist wohl nicht machbar

Umsetzung:
- via Grid-Layout einen Wrapper erzeugt (in meinem Fall [E&F GRID])
- Wrapper mit Klasse .image-box versehen
- innerhalb des Wrappers, innerhalb von START und STOPP, drei Contentelement 'Bild' eingefügt
- 1. CE Bild: das "hintere" Bild
- 2. CE Bild: das "vordere" Bild
- 3. CE Bild: eine Kopie des 2. CE
- Styles via CSS

Code:

---

  .image-column {

    &.image-box {
      position: relative;
      display: block;
      padding: 0 100px 225px 0;
 
      .ce_image:first-child {
        position: relative;
        z-index: 1;
        transition: 500ms;

        &:hover {
          & + .ce_image:nth-child(2) {
            opacity: 0;
          }
        }
      }
 
      .ce_image:nth-child(2),
      .ce_image:nth-child(3) {
        position: absolute;
        right: 0;
        bottom: 0;
        transition: 500ms;
      }

      .ce_image:nth-child(2) {
        z-index: 2;
      }
      .ce_image:nth-child(3) {
        z-index: 0;
      }
    }
  }

---

Wie funktioniert der Effect?:
- Der Aufbau der z-index ist zu beachten:
- Bild 1 liegt zwischen Bild 2 und Bild 3
- Bei :hover über Bild 1 wird das Bild 2 "ausgeblendet" und somit liegt Bild 1 über Bild 3
- Das "Ausblenden" bekommt den Fade-Effect via 'transition'

https://community.contao.org/de/atta...5&d=1636373413

Anhang 25025

Z-index und transition funktionieren nicht zusammen, das stimmt.

Wäre es nicht möglich, den z-index mittels Keyframes zu animieren? So in der Art:

HTML-Code:

---

@-webkit-keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% { z-index:-1;opacity:1}
}
@keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% {z-index:-1;opacity:1}
}

---

Du willst nur den überlappenden Teil faden? Das ist nicht so trivial, denke ich. Da müsstest du theoretisch beide Bilder zwei mal ausgeben und den überlappenden Teil clippen - und dort dann einfach per opacity animieren lassen.

... ja, genau ... und genau das macht die obige Beschreibung auch :D

In diesem Fall ist's ne Anleitung und keine Rückfrage ;)
Hatte mich ein paar Stunden damit auseinander gesetzt und das Ergebnis wollte ich hiermit oben mit der community teilen

Habs mal in Tutorials verschoben, das passt dann ja besser.

Zitat:

---

Zitat von derRenner

... ja, genau ... und genau das macht die obige Beschreibung auch :D

In diesem Fall ist's ne Anleitung und keine Rückfrage ;)
Hatte mich ein paar Stunden damit auseinander gesetzt und das Ergebnis wollte ich hiermit oben mit der community teilen

---

Achso, hoppla :D

Ist zwar nicht speziell hierzu, aber möglicherweise für ähnliche Anforderungen ...

Daher FYI.
Die Eigenschaft »mix-blend-mode« ist nicht nur in Zusammenhang mit Farben (ala »Background Shift Animation with CSS Blend Modes«) nützlich.

Zitat:

---

The mix-blend-mode property can be used to mix together any element with its backdrop.

---

siehe Tutorial (Sara Soueidan) hierzu.