/
- Parameters

Color schemes

Automatic Based on you operating system preference

Light Always apply light mode

Dark Always apply dark mode

Parameters

Just add some keywords on DPiCSS attribute to fine-tune your experience

2026-09-09

Olivier 3lanc

Table of content

Play button
Play button on hover
Pause button
Box shadow
Button shadow parameter
Invert parameter

It seems that your browser JavaScript is disabled, LibDoc is set to fallback mode with reduced features.

`data-dpicss` attribute contains	Description
`play`	Displays "play" button on thumbnail
`play_hover`	Displays a "Play" button on thumbnail only when user hovers the summary
`pause`	Displays a "Pause" button on large sized image only when user hovers the summary
`box_shadow`	Displays a box shadow of the entire details element
`button_shadow`	Displays a shadow around play and pause buttons
`invert`	Swaps foreground and background colors

Play button

Adding play on the data-dpicss attribute displays a "Play" button on thumbnail.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="play">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Simple "Play" button parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px

Play button on hover

Adding play_hover on the data-dpicss attribute displays a "Play" button on thumbnail only when user hovers the summary. For ergonomics reasons, this feature is only for desktop, play button always displays on touch devices.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="play_hover">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Simple "Play" button on hover parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
        <p>For ergonomics reasons, this feature is only for desktop, play button always displays on touch devices.</p>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px

Pause button

Adding pause on the data-dpicss attribute displays a "Pause" button on hover when playing large image. For ergonomics reasons, this feature is only for desktop, pause button is always hidden on touch devices.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="pause">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Simple "Pause" button parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
        <p>For ergonomics reasons, this feature is only for desktop, pause button is always hidden on touch devices.</p>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px

Box shadow

Adding box_shadow on the data-dpicss attribute displays a box shadow of the entire details element.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="box_shadow">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Box shadow parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px

Button shadow parameter

Adding button_shadow on the data-dpicss attribute displays a shadow around play and pause buttons. Note that at least one parameter like play, play_hover or pause must be set to make this feature visible.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="play pause button_shadow">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Button shadow parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px

Invert parameter

Adding invert on the data-dpicss attribute swaps/inverts foreground and background colors.

Sandbox

<link rel="stylesheet" href="/dist/dpicss.css">
<link rel="stylesheet" href="/assets/demo.css">
<main>
    <details data-dpicss="invert play pause button_shadow">
        <summary>
            <picture>
                <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse-thumbnail.avif"
                    alt="The thumbnail"
                    width="1280"
                    height="720"
                    loading="lazy">
            </picture>
            <span>
                Invert parameter
            </span>
        </summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/albertville-timelapse.avif"
                alt="Large sized animated image"
                width="1280"
                height="720"
                loading="lazy">
        </picture>
    </details>
</main>

Enable

srcdoc

Enable

Width: -px
Height: -px