Come mostrare testo sopra una immagine

Come mostrare del testo sopra a una immagine con i CSS e usando il tag title e visibile anche senza passarci sopra con il cursore

Quando scorrete una pagina web e posizionate il cursore sopra una immagine, visualizzerete un tooltip con il testo che è stato inserito nel tag title relativo alla immagine in questione.

Quando si pubblica una foto in una pagina web è infatti buona norma aggiungervi anche i tag title e alt. Il tag alt è fondamentale dal punto di vista SEO, perché mostra il cosiddetto testo alternativo ovvero sarà il testo visualizzato nel browser quando per una qualche ragione quest'ultimo non riesca a caricare l'immagine.

Il tag title è invece contemporaneamente il nome e la descrizione della immagine ed è importante, oltre che dal punto di vista SEO, anche per arricchire l'esperienza del lettore che, semplicemente passando con il mouse sopra a una immagine, possa ricavare informazioni aggiuntive sulla stessa.

Un utente di Blogger può aggiungere i tag title e alt a una immagine direttamente dall'Editor. Si clicca sopra alla foto per selezionarla. Verranno mostrati vari pulsanti per scegliere la sua dimensione e il suo allineamento. Ci sarà anche il pulsante per aggiungere una didascalia e quello della Proprietà.

Cliccando su quest'ultimo, si aprirà un modulo in cui digitare appunto il contenuto del Testo del Titolo e del Testo Alternativo. Si può aggiungere lo stesso contenuto oppure diversificare. Andando su HTML si potrà verificare che i due testi saranno stati inseriti nel codice rispettivamente nei due tag con questa sintassi:

title="Titolo della immagine" e alt="Testo alternativo della immagine"

Il tooltip del titolo della immagine che si visualizza al passaggio del cursore è piuttosto piccolo e esteticamente non troppo valido. In questo post vedremo come personalizzare la visualizzazione del tag title delle immagini. Farò riferimento a Blogger ma il codice che posterò sarà funzionante in tutte le piattaforme che supportano i CSS.

Si va in Modalità HTML nell'Editor e si incolla un codice come questo

<style>
.text-overlay {
    position: relative;   
    width: 100%;  
}
h4 {
    position: absolute;
    color: #eee;
    font: bold 26px Georgia;
    padding:10px;       
    top: 100px;
    left: 10px;
    width: 100%;
}
</style>
<div align="center">
<div class="text-overlay">
       <img src="http://lorempixel.com/600/400" alt="testo alternativo" />     
       <h4>Una immagine casuale<br/>mostrata con Lorem Pixel</h4>
</div>
</div>

Il risultato sarà quello di avere una immagine con un testo in sovraimpressione (overlay), anche senza passarci sopra con il cursore. Il risultato sarà quello di visualizzare una immagine come la seguente.

Come URL della immagine ho usato una immagine casuale ottenuta con il servizio Lorem Pixel.

Le personalizzazioni riguardano ovviamente il testo da mostrare sopra alla foto che è stato colorato di blu. Non bisogna dimenticarci del testo alternativo, che in questo caso è diverso da quello del titolo. Si può poi modificare il codice del colore del testo, la dimensione dei caratteri e la famiglia dei font.

I due tag top: 100px; e left: 10px; servono per posizionare il testo in funzione della distanza dalla parte alta e da quella sinistra della foto. Però con l'aggiunta opzionale del tag <div align="center"> la scritta verrà centrata.

Gli utenti di Blogger potranno inserire il codice nel Tema incollando la parte evidenziata di verde subito sopra al tag </head>. In questo modo nel post dovranno soltanto inserire il codice evidenziato di giallo. Ovviamente al posto dell'URL della immagine, ricavato da Lorem Pixel, si deve inserire l'hotlink della immagine che potrà essere stata caricata preventivamente su Blogger in una bozza seguendo queste istruzioni.