Blog Informatica & Programmazione

Immagine con didascalia semitrasparente

È possibile creare delle immagini con didascalia semitrasparente, al passaggio del mouse in modo abbastanza semplice, ma per prima cosa esaminiamo il codice HTML:


il div contiene tutta l'immagine con la didascalia, lo span è un blocco di testo che racchiuderà il testo che verrà utilizzato come didascalia, mentre lo strong contiene il titolo del testo nella didascalia.

Andiamo ad esaminare bene il codice CSS:
1. Come primo passaggio modifichiamo lo stile della classe contenitore, che è quella che contiene l'intera immagine con la didascalia:

il float permette di spostare l'intera didascalia a sinistra, sull'immagine, i margini è meglio che entrambi siano impostati a 0, il font-size indica invece la grandezza del testo dello span, il font-family indica invece il carattere utilizzato, e l'overflow con valore hidden non permette la presenza di scrollbar.

2. Come secondo passaggio andiamo a modificare lo stile dell'immagine:

Anche nell'immagine consiglio di azzerare i margini, per quanto riguarda il bordo decidete voi quale effetto applicare, a mio parere in questo caso l'immagine sta bene anche senza, potete decidere anche la larghezza o l'altezza dell'immagine.

3. Come terzo passaggio passiamo finalmente allo span, ovvero il blocco di testo che contiene il testo della didascalia:

Le prime 3 proprietà servono a spostare la didascalia, nella parte bassa dell'immagine, in modo che la didascalia cominci dal bordo inferiore e sinistro dell'immagine.
il background, serve per tutti quei browser come molte versioni di Internet explorer che non supportano lo sfondo semi-trasparente;
il background con valore rgba(0,0,0,0.7), serve per ottenere lo sfondo trasparente;
il color, indica il colore del testo, e il display con valore none, non vi permetterà di vedere la didascalia, per ottenere l'effetto che sarà visibile solo al passaggio del mouse (che specificheremo fra un po'), nel caso invece vogliate che la didascalia sia sempre visibile, vi basterà rimuovere questa proprietà.

4. Modifichiamo il titolo della didascalia:

Questo lo potete modificare più o meno come volete voi, io vi ho consigliato queste modifiche:
il text-transform con valore uppercase vi porterà il titolo tutto in maiuscolo, ovviamente è facoltativo;
Poi potrete personalizzare il testo, come portare il testo in maiuscolo, decidere la grandezza del testo (vi consiglio vivamente di fare la grandezza del testo più grande di quella del testo della didascalia, in modo che il titolo sia più visibile), decidere il colore e il carattere del testo.
Potete anche decidere di aggiungere dei margini, in modo da distanziare il titolo dal testo della didascalia;
Il display con valore block, invece è abbastanza importante perché farà andare a capo il testo della didascalia;

5. Infine solo per chi fosse interessato all'effetto didascalia al passaggio del mouse è possibile utilizzare questo semplice codice:

che rende visibile la didascalia, precedentemente nascosta durante la modifica allo stile dello span.

CLICCA PER VISUALIZZARE L'ESEMPIO