Skip to main content

Grids & Cards – Reveal

Media Reveal – 16 Effekte

Sechzehn Arten, wie ein Bild zu Inhalt wird. Mit der Maus über ein Bild fahren (auf Touch-Geräten antippen). Der Effekt wird allein über die Klasse media-reveal--name an der figure gewählt.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Zipper media-reveal--zipper

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Torch media-reveal--torch

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Lens media-reveal--lens

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Bloom media-reveal--bloom

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Shredder media-reveal--shredder

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Radar media-reveal--radar

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
CRT media-reveal--crt

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Kaleidoscope media-reveal--kaleidoscope

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Tide media-reveal--tide

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Pop-up media-reveal--pop-up

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Curtain media-reveal--curtain

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Blind media-reveal--blind

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Shatter media-reveal--shatter

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Door media-reveal--door

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Lift media-reveal--lift

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Page media-reveal--page

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

<figure class="media-styled media-rounded media-shadow media-reveal--curtain">
    <img src="/sites/default/files/…/bild.jpg" alt="Beschreibung">
    <figcaption><span class="media-title">Optionale Bildunterschrift</span></figcaption>
    <div class="media-reveal">
        <h3>Überschrift</h3>
        <p>Der Inhalt, der hinter dem Bild liegt.</p>
    </div>
</figure>

Effekte

KlasseWas passiertZusätzliches JavaScript
media-reveal--zipperEin Metallschieber läuft die Naht hinunter, das Bild öffnet sich wie ein Reißverschluss.–
media-reveal--torchDer Raum wird dunkel; wo der Zeiger hereinkam, geht ein Licht an und flutet die Fläche.Zeigerposition
media-reveal--lensEine Lupe legt sich aufs Bild; durch das Glas erscheint der Inhalt, bis alles Glas ist.Seitenverhältnis
media-reveal--bloomAcht Blütenblätter entfalten sich mit einer Drehung, bis sie das Panel sind.8 Inhaltskopien
media-reveal--shredderDas Bild wird in zwölf Streifen geschnitten, die herausfallen.12 Bildstreifen
media-reveal--radarEin Strahl läuft einmal um die Scheibe; was er passiert hat, ist der neue Inhalt.–
media-reveal--crtEin alter Fernseher: Punkt, helle Linie, das Bild entfaltet sich.–
media-reveal--kaleidoscopeSechs Keile machen aus Bild und Inhalt ein Mandala, das sich entdreht.6 Keile
media-reveal--tideDie Flut kommt schräg herein: Wasserlinie mit Welle und Schaum.–
media-reveal--pop-upEin Pop-up-Buch: die Seite kippt weg, eine Karte richtet sich auf.–
media-reveal--curtainDer Bühnenvorhang rafft sich an drei Schnüren nach oben.–
media-reveal--blindDas Raffrollo: gerader Saum, waagerechte Falten.–
media-reveal--shatterSicherheitsglas: vom Berührungspunkt breitet sich ein Rissnetz aus, 24 Scherben fallen.24 Scherben, Zeigerposition
media-reveal--doorSchiebetür: das Bild teilt sich in der Mitte, beide Flügel gleiten zur Seite.2 Bildhälften
media-reveal--liftAufzug: die Karte fährt von unten hoch und schiebt das Bild hinaus.–
media-reveal--pageBuchseite: das Bild wird an der Kante angehoben und umgeblättert.–

Regeln

  • Das Bild muss als img direkt in der figure stehen; der Inhalt in div.media-reveal. Enthält das Panel nur ein Bild, wird es randlos als Bild-zu-Bild-Wechsel gezeigt.
  • Kombinierbar mit media-rounded (Ecken aus dem Skin) und media-shadow (Kartenschatten aus dem Skin). Farben und Schriften des Panels kommen aus dem Skin.
  • Die Komponente lädt nur auf Seiten, deren Text eine Klasse media-reveal--… enthält – nicht auf der ganzen Website.
  • Die Effekte ohne zusätzliches JavaScript (Zipper, Radar, CRT, Tide, Pop-up, Curtain, Blind, Lift, Page) sind am leichtesten.
  • Bei „Bewegung reduzieren" im Betriebssystem blendet das Panel nur weich ein.

Klick-Modus

Mit data-reveal-trigger="click" bleibt der Inhalt offen, bis erneut geklickt wird. Per Tastatur: Tab, Enter oder Leertaste öffnet, Esc schließt.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Curtain media-reveal--curtain

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Door media-reveal--door

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
Page media-reveal--page

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

Papiertheater mit ausgeschnittenen Bergen auf einem Holztisch
CRT media-reveal--crt

Hinter dem Bild

Hier steht der Inhalt, der hinter dem Bild liegt: Text, eine Erklärung, ein Link oder ein zweites Bild.

<figure class="media-styled media-rounded media-shadow media-reveal--door" data-reveal-trigger="click">
    <img src="/sites/default/files/…/bild.jpg" alt="Beschreibung">
    <div class="media-reveal">
        <h3>Überschrift</h3>
        <p>Text mit <a href="/de">Link</a> – Klicks auf Links schließen das Panel nicht.</p>
    </div>
</figure>
  • data-reveal-trigger="hover" (Standard): öffnet beim Überfahren, schließt beim Verlassen.
  • data-reveal-trigger="click": Klick oder Tipp öffnet und schließt.
  • Touch-Geräte werden automatisch auf Klick umgestellt.