Ergebnis 1 bis 7 von 7

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

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard Ü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'



    z-index_transition_00.jpg
    Grüsse
    Bernhard


  2. #2
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    847

    Standard

    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}
    }
    Geändert von dazzle89 (08.11.2021 um 13:39 Uhr)

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    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.
    » sponsor me via GitHub or PayPal or Revolut

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    ... 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
    Grüsse
    Bernhard


  5. #5
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    ... 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
    » sponsor me via GitHub or PayPal or Revolut

  7. #7
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    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.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •