Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Overlay

Due sovrapposizioni: il pannello sopra un'immagine (didascalia, icona, a tutta altezza) e il dimmer che copre un contenitore con messaggio e azioni. Il dimmer si apre con una checkbox, senza JavaScript.

Riferimento
<it-dimmer>, .overlay-panel (bootstrap-italia)
Classi
ita-overlayita-overlay-panelita-overlay-neutralita-overlay-fullita-overlay-hoverita-dimmerita-dimmer-primaryita-dimmer-toggleita-dimmer-panelita-dimmer-iconita-dimmer-titleita-dimmer-textita-dimmer-actionsita-dimmer-actionita-dimmer-action-primary
Basato su (daisyUI)
cardbtn
Solo CSS
Il dimmer usa una checkbox sr-only (ita-dimmer:has(> input:checked)) al posto dei metodi show()/hide()/toggle() del web component. Il pannello in hover compare anche con :focus-within, così è raggiungibile da tastiera quando l'immagine è dentro un link.
Storybook
Apri le storie di Overlay

Pannello sull'immagine

Breve descrizione immagine
Titolo del contenuto
Breve descrizione immagine
Pannello neutral
Mostra il codice HTML
<div class="flex flex-wrap items-start gap-6">
  <figure class="ita-overlay">
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><span>Titolo del contenuto</span></figcaption>
</figure>
  <figure class="ita-overlay ita-overlay-neutral">
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><span>Pannello neutral</span></figcaption>
</figure>
</div>

Pannello a tutta altezza e con icona

Breve descrizione immagine
Pannello a tutta altezza
Breve descrizione immagine
Breve descrizione immagine
Mostra il codice HTML
<div class="flex flex-wrap items-start gap-6">
  <figure class="ita-overlay ita-overlay-full">
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><span>Pannello a tutta altezza</span></figcaption>
</figure>
  <figure class="ita-overlay ita-overlay-full">
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" role="img" aria-label="Ingrandisci l'immagine"><path d="M10.4,9.5h3.3v1h-3.3v3.2h-1v-3.2H6.2v-1h3.2V6.2h1V9.5z M21.1,21.9L15.3,16c-1.5,1.3-3.4,2-5.3,2c-4.4,0-8-3.6-8-8 s3.6-8,8-8s8,3.6,8,8c0,1.9-0.7,3.8-2,5.3l5.9,5.8L21.1,21.9z M17,10c0-3.9-3.1-7-7-7s-7,3.1-7,7s3.1,7,7,7S17,13.9,17,10z" /></svg></figcaption>
</figure>
  <figure class="ita-overlay ita-overlay-neutral ita-overlay-full">
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" role="img" aria-label="Riproduci il video"><path d="M17.5,7.3V6c0-0.8-0.7-1.5-1.5-1.5H5.5C4.7,4.5,4,5.2,4,6v8c0,0.8,0.7,1.5,1.5,1.5h3.4L7.4,21h1l1.6-5.5h1.8l1.6,5.5h1 l-1.6-5.5H16c0.8,0,1.5-0.7,1.5-1.5v-1.3l4,1.5V5.8L17.5,7.3z M20.5,12.8l-4-1.5V14c0,0.3-0.2,0.5-0.5,0.5H5.5 C5.2,14.5,5,14.3,5,14V6c0-0.3,0.2-0.5,0.5-0.5H16c0.3,0,0.5,0.2,0.5,0.5v2.7l4-1.5V12.8z M2,8h1v4H2V8z" /></svg></figcaption>
</figure>
</div>

Pannello al passaggio del mouse

Compare anche col focus da tastiera, perché l'immagine è dentro un link.

Breve descrizione immagine
Breve descrizione immagine
Titolo del contenuto
Mostra il codice HTML
<div class="flex flex-wrap items-start gap-6">
  <a href="#" class="ita-overlay ita-overlay-full ita-overlay-hover">
  <figure>
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" role="img" aria-label="Ingrandisci"><path d="M10.4,9.5h3.3v1h-3.3v3.2h-1v-3.2H6.2v-1h3.2V6.2h1V9.5z M21.1,21.9L15.3,16c-1.5,1.3-3.4,2-5.3,2c-4.4,0-8-3.6-8-8 s3.6-8,8-8s8,3.6,8,8c0,1.9-0.7,3.8-2,5.3l5.9,5.8L21.1,21.9z M17,10c0-3.9-3.1-7-7-7s-7,3.1-7,7s3.1,7,7,7S17,13.9,17,10z" /></svg></figcaption>
  </figure>
</a>
  <a href="#" class="ita-overlay ita-overlay-hover">
  <figure>
  <img src="https://picsum.photos/seed/overlay/800/600" alt="Breve descrizione immagine" loading="lazy">
  <figcaption class="ita-overlay-panel"><span>Titolo del contenuto</span></figcaption>
  </figure>
</a>
</div>

Dimmer

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Toggle dimmer

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.

Mostra il codice HTML
<div class="ita-dimmer">
  <input type="checkbox" id="dimmer-1" class="sr-only" aria-label="Toggle dimmer">
  <label for="dimmer-1" class="ita-btn ita-btn-primary ita-dimmer-toggle">Toggle dimmer</label>
  <div class="relative">
    <div class="grid gap-6 sm:grid-cols-2">
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/city/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/nature/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
  </div>
    <div class="ita-dimmer-panel" role="group" aria-labelledby="dimmer-1-title">
      <div>
        <div class="ita-dimmer-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg></div>
        <span id="dimmer-1-title" class="sr-only">Toggle dimmer</span>
        <p class="ita-dimmer-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.</p>
        
      </div>
    </div>
  </div>
</div>

Dimmer di colore primario

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Toggle dimmer

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Mostra il codice HTML
<div class="ita-dimmer ita-dimmer-primary">
  <input type="checkbox" id="dimmer-2" class="sr-only" aria-label="Toggle dimmer">
  <label for="dimmer-2" class="ita-btn ita-btn-primary ita-dimmer-toggle">Toggle dimmer</label>
  <div class="relative">
    <div class="grid gap-6 sm:grid-cols-2">
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/city/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/nature/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
  </div>
    <div class="ita-dimmer-panel" role="group" aria-labelledby="dimmer-2-title">
      <div>
        <div class="ita-dimmer-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg></div>
        <span id="dimmer-2-title" class="sr-only">Toggle dimmer</span>
        <p class="ita-dimmer-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
        
      </div>
    </div>
  </div>
</div>

Dimmer con azioni

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione.

Titolo del dimmer

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.

Mostra il codice HTML
<div class="ita-dimmer">
  <input type="checkbox" id="dimmer-3" class="sr-only" aria-label="Toggle dimmer">
  <label for="dimmer-3" class="ita-btn ita-btn-primary ita-dimmer-toggle">Toggle dimmer</label>
  <div class="relative">
    <div class="grid gap-6 sm:grid-cols-2">
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/city/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
    <article class="card card-border border-base-content/20 bg-base-100">
      <figure class="aspect-video bg-base-300"><img src="https://picsum.photos/seed/nature/800/600" alt="" class="size-full object-cover" loading="lazy"></figure>
      <div class="card-body gap-2 p-4">
        <h3 class="card-title text-xl font-bold"><a href="#" class="ita-link">Titolo del contenuto</a></h3>
        <p class="text-sm">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
      </div>
    </article>
  </div>
    <div class="ita-dimmer-panel" role="group" aria-labelledby="dimmer-3-title">
      <div>
        <div class="ita-dimmer-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg></div>
        <h4 id="dimmer-3-title" class="ita-dimmer-title">Titolo del dimmer</h4>
        <p class="ita-dimmer-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.</p>
        <div class="ita-dimmer-actions"><button type="button" class="ita-btn ita-dimmer-action">Azione secondaria</button><button type="button" class="ita-btn ita-dimmer-action ita-dimmer-action-primary">Azione primaria</button></div>
      </div>
    </div>
  </div>
</div>