Come visualizzare un testo sopra una foto con il CSS.

Come aggiungere una descrizione sopra una immagine senza modifiche grafiche ma utilizzando solo il linguaggio CSS.

Gli utenti di Blogger possono mostrare una descrizione in calce a una foto utilizzando lo strumento Aggiungi didascalia direttamente dall'Editor del post. In sostanza l'Editor di Blogger crea una tabella di due righe e una colonna, quindi con due celle, dove nella prima viene mostrata la foto e nella seconda la Didascalia testuale che funziona come descrizione. 

I colori e i caratteri della Didascalia vengono ereditati dal blog ma possono anche essere personalizzati. Utilizzando le Didascalie possono essere create in Blogger anche delle semplici Gallerie di Foto. Sempre con le Didascalie e un programma di grafica come Photoshop, Gimp, Paint.NET o Pinta si può aggiungere del testo a una immagine in modo abbastanza semplice.

In questo articolo vediamo come inserire testo sopra a una immagine utilizzando il linguaggio CSS quindi lasciando l'immagine di partenza invariata. Questa tecnica può essere usata quando si voglia usare la stessa immagine con testi diversi da utilizzare in diversi contesti.

Il codice seguente può essere incollato in un widget andando su Layout > Aggiungi un gadget > Base > HTML/Javascript oppure anche in un post o pagina statica in Modalità HTML

<style>
.immagine {
   position: relative;   
   width: 100%;
}
.immagine h4 {
   position: absolute;
   color: #eee;
   font: bold 24px Georgia;
   padding:10px;       
   top: 180px;
   left: 100px;  
   width: 100%;
}
</style>
<div class="immagine">
      <img src="URL_IMMAGINE" alt="testo alternativo" /> 
      <h4>Testo prima riga<br/>Testo seconda riga<br/>Testo terza riga</h4> 
</div>

Il risultato sarà il seguente

Il testo della descrizione è stato suddiviso in tre righe tramite i tag <br/> ma lo si può inserire anche in una sola riga o in più di tre. Si può personalizzare anche il codice del colore del testo e la famiglia di font (Georgia).  Gli altri parametri riguardano la distanza dall'alto (top: 180px;) e la distanza del testo dalla sinistra (left: 100px;). Il Testo alternativo all'interno del tag Alt serve per esigenze SEO e mostra tale testo quando il browser non riesce a caricare la foto.

L'immagine e il testo possono anche essere linkati per fare in modo che il lettore che vi clicca sopra apra un'altra pagina del blog o anche una pagina esterna. Il codice in questo caso diventa

<style>
.immagine {
   position: relative;   
   width: 100%;
}
.immagine h4 {
   position: absolute;
   color: #eee;
   font: bold 24px Georgia;
   padding:10px;       
   top: 140px;
   left: 100px;  
   width: 100%;
}
</style>
<div class="immagine">
      <a href="URL_LINK" target="_blank"><img src="URL_IMMAGINE" alt="testo alternativo" /> 
      <h4>Testo della prima riga<br/>Testo della seconda riga<br/>Testo della terza riga</h4></a>   
</div>

Al codice precedente è stato aggiunto il tag <a href=.. > con la sua chiusura </a> che serve per linkare un oggetto HTML. Gli altri parametri hanno lo stesso significato di quelli del codice precedente. Il tag target="_blank" è opzionale e serve per aprire il link in un'altra scheda del browser. Le immagini possono essere caricate su Picasa da cui si deve ricavare il loro URL diretto. 

Come mostrare un tooltip con la descrizione su una foto al passaggio del cursore