Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Overlay Panel

Overlay Panel

Per applicare label sovrapposte ad immagini o elementi.

La struttura basica è composta da un contenitore <figure> con classe .overlay-wrapper. L’immagine contenuta conserva la sua dimensione naturale.

L’overlay, una <figcaption> con classe .overlay-panel, si posizione a piede dell’immagine. Ha un’altezza fissa e una larghezza corrispondente a quella dell’immagine.

Nel caso il testo contenuto sia troppo lungo verrà troncato con l’utilizzo di ellissi.

Aggiungendo all’Overlay Panel la classe .overlay-panel-fullheight questo coprirà per intero l’immagine.

Esempio

Il colore predefinito dell’Overlay Panel corrisponde al colore Primary.

Overlay ad altezza fissa

descrizione immagine
Label immagine

Overlay a tutta altezza

descrizione immagine
Label immagine

Esempio con differenti proporzioni

descrizione immagine
Label immagine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <p><strong>Overlay ad altezza fissa</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel"><span>Label immagine</span></figcaption>
      </figure>
    </div>
    <div class="col-12 col-md-6">
      <p><strong>Overlay a tutta altezza</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel overlay-panel-fullheight"><span>Label immagine</span></figcaption>
      </figure>
    </div>
    <div class="col-12">
      <p><strong>Esempio con differenti proporzioni</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/800/300?image=1055" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel"><span>Label immagine</span></figcaption>
      </figure>
    </div>
  </div>
</div>

Overlay Nero

Aggiungendo all’Overlay Panel la classe .overlay-black si ottiene un overlay di colore nero.

Overlay ad altezza fissa

descrizione immagine
Label immagine

Overlay a tutta altezza

descrizione immagine
Label immagine

Esempio con differenti proporzioni

descrizione immagine
Label immagine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <p><strong>Overlay ad altezza fissa</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel overlay-black"><span>Label immagine</span></figcaption>
      </figure>
    </div>
    <div class="col-12 col-md-6">
      <p><strong>Overlay a tutta altezza</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel overlay-panel-fullheight overlay-black"><span>Label immagine</span></figcaption>
      </figure>
    </div>
    <div class="col-12">
      <p><strong>Esempio con differenti proporzioni</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/800/300?image=1055" alt="descrizione immagine" class="img-fluid">
        <figcaption class="overlay-panel overlay-black"><span>Label immagine</span></figcaption>
      </figure>
    </div>
  </div>
</div>

Overlay con icona

Per ottenere un Overlay Panel con icona centrata in verticale ed orizzontale aggiungere la classe .overlay-icon.

Accessibilità

Ricordarsi di aggiungere un testo alternativo per Screen Reader che comunichi lo stesso messaggio dell’icona.

Overlay Primary (default)

descrizione immagine

Overlay Nero

descrizione immagine 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <p><strong>Overlay Primary (default)</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine">
        <figcaption class="overlay-panel overlay-icon">
          <span class="visually-hidden">Immagine Preferita</span>
          <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        </figcaption>
      </figure>
    </div>
    <div class="col-12 col-md-6">
      <p><strong>Overlay Nero</strong></p>
      <figure class="overlay-wrapper">
        <img src="https://picsum.photos/240/160?image=1056" alt="descrizione immagine">
        <figcaption class="overlay-panel overlay-black overlay-icon">
          <span class="visually-hidden">Immagine Preferita</span>
          <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-overlay-panel-padding-y Controls the vertical padding of the panel, using spacing tokens var(--bsi-spacing-s)
--bsi-overlay-panel-padding-x Controls the horizontal padding of the panel, using spacing tokens var(--bsi-spacing-m)
--bsi-overlay-panel-bg Controls the background color of the panel, using overlay background tokens var(--bsi-overlay-background-primary)
--bsi-overlay-panel-color Controls the text color of the panel, using color tokens var(--bsi-color-text-inverse)
--bsi-overlay-panel-font-weight Controls the font weight of the panel, using typography tokens var(--bsi-font-weight-solid)
--bsi-overlay-panel-font-size Controls the font size of the panel, using typography tokens var(--bsi-label-font-size-s)
--bsi-overlay-panel-max-height Control the height of the panel when it is not full height 3.5rem
--bsi-overlay-panel-icon-color Controls the color of icons in the panel, using icon tokens var(--bsi-icon-inverse)