Come mostrare un testo sopra una immagine con il CSS.

Come visualizzare del testo personalizzato sopra a una immagine senza usare i programmi di grafica ma solo HTML e CSS.

A seguito di una richiesta pubblicata in un post della pagina Facebook di questo sito vado a illustrare in modo molto rapido e necessariamente didascalico come mostrare sopra a una immagine un testo per descriverla senza bisogno di fare una modifica grafica ma lasciando assolutamente intatta la foto.

In realtà quando si passa con il mouse sopra a una immagine viene mostrato il testo che è stato inserito all'interno del tag Title mentre il tag Alt è importante soprattutto dal punto di vista SEO e serve per mostrare un testo alternativo quando il browser non riesce a caricare l'immagine per una qualche ragione. Con questa personalizzazione si mostrerà un testo personalizzabile sopra l'immagine a prescindere dal cursore che la punti o meno.

Il codice si può incollare in un gadget HTML/Javascript o in un post in modalità HTML e potrebbe portare a un risultato come questo

 

Il codice può avere questa struttura di base

<style>
.immagine {
   position: relative;   
   width: 100%;
}
h4 {
   position: absolute;
   color: #eee;
   font: bold 22px Georgia;
   padding:10px;       
   top: 100px;
   left: 10;
   width: 100%;
}
</style>
<div class="immagine">
      <img src="http://lorempixel.com/300/300" alt="testo alternativo" />     
      <h4>Una immagine classica<br />mostrata con Lorem Pixel</h4>
</div>

dove l'URL della immagine deve ovviamente essere modificato mentre il testo in blu rappresenta il testo da visualizzare. Il colore del testo (#eee), la famiglia di caratteri (Georgia) e la dimensione dei font (22px) possono essere scelti a piacere. Il tag <br/> produce un salto di riga per organizzare meglio la scritta. La distanza del testo dalla parte alta (top: 100px) e dalla parte sinistra (left: 10px) possono essere settate a piacimento in funzione delle dimensioni della foto. Il padding:10px; è importante per distanziare il testo dai bordi della foto.

 Concludo ricordando che si può anche linkare l'immagine integrando il codice precedente in questo modo

<a href="URL_LINK"><img src="URL_IMMAGINE" alt="testo alternativo" /></a>

Nel caso in cui il tag <h4> modificasse qualche elemento del layout sostituirlo con <h5> o con <h6>.