Skip to main content

Grids & Cards – Reveal

Media Reveal – 16 Effects

Sixteen ways for a picture to turn into content. Move the mouse over a picture (tap it on touch devices). The effect is chosen solely by the class media-reveal--name on the figure.

Paper theatre with cut-out mountains on a wooden table
Zipper media-reveal--zipper

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Torch media-reveal--torch

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Lens media-reveal--lens

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Bloom media-reveal--bloom

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Shredder media-reveal--shredder

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Radar media-reveal--radar

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
CRT media-reveal--crt

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Kaleidoscope media-reveal--kaleidoscope

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Tide media-reveal--tide

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Pop-up media-reveal--pop-up

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Curtain media-reveal--curtain

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Blind media-reveal--blind

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Shatter media-reveal--shatter

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Door media-reveal--door

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Lift media-reveal--lift

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Page media-reveal--page

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

<figure class="media-styled media-rounded media-shadow media-reveal--curtain">
    <img src="/sites/default/files/…/picture.jpg" alt="Description">
    <figcaption><span class="media-title">Optional caption</span></figcaption>
    <div class="media-reveal">
        <h3>Heading</h3>
        <p>The content that sits behind the picture.</p>
    </div>
</figure>

Effects

ClassWhat happensAdditional JavaScript
media-reveal--zipperA metal slider runs down the seam and the picture opens like a zip.–
media-reveal--torchThe room goes dark; a light switches on where the pointer came in and floods the surface.Pointer position
media-reveal--lensA magnifying glass settles on the picture; the content shows through the glass until everything is glass.Aspect ratio
media-reveal--bloomEight petals unfold with a turn until the petals are the panel.8 content copies
media-reveal--shredderThe picture is cut into twelve strips that drop out.12 image strips
media-reveal--radarA beam sweeps once around the dial; whatever it has passed is the new content.–
media-reveal--crtAn old television: a dot, a bright line, then the picture unfolds.–
media-reveal--kaleidoscopeSix wedges turn picture and content into a mandala that untwists.6 wedges
media-reveal--tideThe tide comes in at an angle: a waterline with a wave and foam.–
media-reveal--pop-upA pop-up book: the page tips away and a card stands up.–
media-reveal--curtainThe stage curtain gathers upwards on three cords.–
media-reveal--blindThe Roman blind: straight hem, horizontal folds.–
media-reveal--shatterSafety glass: a web of cracks spreads from the point of contact and 24 shards fall.24 shards, pointer position
media-reveal--doorSliding door: the picture splits in the middle and both leaves glide aside.2 image halves
media-reveal--liftLift: the card travels up from below and pushes the picture out.–
media-reveal--pageBook page: the picture is lifted at its edge and turned over.–

Rules

  • The picture must be an img directly inside the figure; the content goes into div.media-reveal. If the panel contains only a picture, it is shown edge to edge as a picture-to-picture change.
  • Can be combined with media-rounded (corners from the skin) and media-shadow (card shadow from the skin). The panel takes its colours and fonts from the skin.
  • The component loads only on pages whose text contains a class media-reveal--… – not across the whole website.
  • The effects without additional JavaScript (Zipper, Radar, CRT, Tide, Pop-up, Curtain, Blind, Lift, Page) are the lightest.
  • With “reduce motion” switched on in the operating system, the panel simply fades in.

Click Mode

With data-reveal-trigger="click" the content stays open until it is clicked again. By keyboard: Tab, then Enter or Space opens, Esc closes.

Paper theatre with cut-out mountains on a wooden table
Curtain media-reveal--curtain

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Door media-reveal--door

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
Page media-reveal--page

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

Paper theatre with cut-out mountains on a wooden table
CRT media-reveal--crt

Behind the Picture

This is the content that sits behind the picture: text, an explanation, a link or a second picture.

<figure class="media-styled media-rounded media-shadow media-reveal--door" data-reveal-trigger="click">
    <img src="/sites/default/files/…/picture.jpg" alt="Description">
    <div class="media-reveal">
        <h3>Heading</h3>
        <p>Text with a <a href="/en">link</a> – clicking links does not close the panel.</p>
    </div>
</figure>
  • data-reveal-trigger="hover" (default): opens on hover, closes on leaving.
  • data-reveal-trigger="click": a click or tap opens and closes.
  • Touch devices are switched to click automatically.