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

[derRenner]

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

  .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'



z-index_transition_00.jpg

[dazzle89]

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:

@-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}
}

[Spooky]

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.

[derRenner]

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

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

[lucina]

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

[Spooky]

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

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

[Franko]

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.

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

siehe Tutorial (Sara Soueidan) hierzu.