Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Hover-Effekt

  1. #1
    Contao-Fan Avatar von Zille
    Registriert seit
    23.12.2015.
    Beiträge
    570

    Standard Hover-Effekt

    Moin,
    ich möchte eine Galerie erstellen, bei der die Vorschaubilder beim Hovern abdunkeln und einen Text (Beschreibung) zeigen. Ähnlich dieser Galerie:
    https://sammlung-online.stadtmuseum....EB_0502&page=1

    • wie heißt dieser Efekt (damit ich gezielt nach einer Beschreibung suchen kann)?
    • kann mir jemand eventuell ein Tool dazu nennen?
    • möglicherweise geht das ja auch bereits mit den Bordmitteln – wie?

    Danke.

  2. #2
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard Hover-Effekt

    Das läßt sich letztendlich einfach mit CSS realisieren.
    Wie fit bist du da?

    Grob... z.B. Textlemente anlegen mit Bild + Text, den Text standardmäßig ausblenden und auf :hover (aufs Bild oder den Link) wieder einblenden. Die Positionierung (Text absolut, das ganze Element relativ, damit der Text absolut zum jeweiligen Element steht) und die Formatierung (Farben etc.) ebenfalls per CSS.

    Gruß Thomas
    Geändert von tblumrich (09.10.2019 um 23:03 Uhr)
    blucomp | Webdesign & Onlinelösungen

  3. #3
    Contao-Nutzer Avatar von Rev
    Registriert seit
    11.09.2009.
    Ort
    Rostock
    Beiträge
    25
    Partner-ID
    3488

    Standard

    Hallo Zille

    Schau mal hier: https://jsfiddle.net/fteyakLn/

    Noch mal zusammen gefasst:

    HTML-Code:
    <div class="ce_image first block">
      <a href="/">
        <figure class="image_container">
          <img src="/" alt="" width="200" height="54">
          <figcaption class="caption">Untertitel</figcaption>
        </figure>
      </a>
    </div>
    
    <style type="text/css">
    .ce_image * { box-sizing: border-box; }
    .ce_image { position: relative; text-align: center; }
    .ce_image figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.8); padding: 5px; color: #ffffff; opacity: 0; }
    .ce_image:hover figcaption { opacity: 1; }
    
    /* Transition-Effekt? */
    .ce_image * { transition: all 0.3s linear;}
    </style>

  4. #4
    Contao-Fan Avatar von Zille
    Registriert seit
    23.12.2015.
    Beiträge
    570

    Standard

    Prima, besten Dank. Da habe ich doch schon mal einen Ansatz.

  5. #5
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard

    Suche auch mal nach CSS Flip Animation

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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