Pubblicato il 27/03/14e aggiornato il

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

  testo sopra l'immagine

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>




5 commenti :

  1. Scusami ti scrivo ancora per il problema della descrizione del post quando si condivide il post su facebook (appariva la descrizione del blog). Ho inserito correttamente la descrizione tramite blogger seguendo le tue istruzioni però ho notato che adesso invece della descrizione del blog appare il primo commento al post... mi puoi aiutare? come mai?

    RispondiElimina
  2. Non so quale post hai seguito. Ne ho scritti diversi su questo tema. Prova con le Preferenze di Ricerca
    http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
    Se non va usa il Facebook Debugger
    http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
    @#

    RispondiElimina
  3. Si ho seguito sia le istruzioni per creare l'app e inserire i 2 codici, 1 sotto body l'altro nella head. Fb debugger da un errore solo relativo a og:image (non so perché) e ho seguito pure le istruzioni dell'altro tuo post sulle preferenze di ricerca ma continua a condividere al posto della descrizione il 1 commento del post .. :(

    RispondiElimina
  4. Come faccio per inserire la descrizione del post da qualche parte? Quando creo il post a destra non trovo la voce 'descrizione'..

    RispondiElimina
    Risposte
    1. Non trovi la voce perché non l'hai attivata. Vai su Impostazioni > Preferenze di ricerca > Metatag > Descrizione > Modifica > mettere la flag sul Sì a Abilitare le descrizioni della ricerca? > Inserire una breve descrizione del blog e andare su Salva modifiche. Quando lo avrai fatto sulla destra vedrai la Descrizione della ricerca
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.