Come mostrare una descrizione sopra una immagine al passaggio del mouse.

Come mostrare una descrizione in stile tooltip sopra una immagine al passaggio del mouse usando HTML e CSS.

Nel codice HTML per pubblicare una immagine oltre al tag src che serve per inserirvi l'indirizzo dell'hotlink della stessa immagine ci possono essere anche i tag width, height, title e Alt. I tag width e height servono ovviamente per settare le dimensioni delle immagini. Se non fossero presenti la foto verrebbe mostrata con le sue dimensioni originali.

Il tag alt è quello più importante in ottica SEO e serve per il cosiddetto Testo Alternativo. Come valore di questo tag si mette tra virgolette il testo che si visualizzerà qualora il browser non riesca a caricare l'immagine per qualche ragione. Il tag title è invece sempre una descrizione della foto ma si visualizza come tooltip quando si passa con il cursore sopra all'immagine. Spesso i tag alt e title hanno lo stesso testo specie se si creano i post con Open Live Writer.

Tale tooltip è estremamente minimalista e non serve molto se si vuole inserire una descrizione lunga magari con colore del testo, famiglia di caratteri, dimensioni dei font, sfondo del tooltip e posizionamento personalizzati. In questo post mostrerò come creare una descrizione che si mostra sopra all'immagine al passaggio del cursore che abbia questo aspetto 

Si apre l'Editor del post o della pagina statica e si incolla un codice con questa struttura

<style type="text/css">
.descrizione {
position: relative;
margin: 10px auto;
}
.descrizione img {
width:400px; /* Larghezza immagine */
border:1px dashed #036; /* Bordo immagine */
background-color:lightyellow; /* Colore sfondo immagine */
padding:5px; /* Spessore sfondo immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:320px; /* Larghezza tooltip */
font-size:15px; /* Dimensione font */
font-family: Georgia; /* Famiglia dei caratteri */
top: 5%;
left: 2%; /* Posizionamento inizio del tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: brown; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.descrizione:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}
</style>
<div class="descrizione"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

dove i commenti colorati di verde del tipo /* Commento */ servono per illustrare il significato dei vari parametri e possono anche essere tralasciati. I parametri colorati di rosso possono invece essere modificati a secondo delle esigenze. Chi non conosca le basi dell'HTML può consultare i post sui codici dei colori e sullo stile del bordo e scaricare l'ebook Guida all'HTML e al CSS.

La penisola del Kamchatka è in assoluto una delle zone del mondo più salvagge e affascinanti in cui la speranza di pescare un salmone degno di nota non può che tradursi in realtà. Siamo nell’estremo Est della EX Repubblica Sovietica, siberia dell’est, immediatamente sopra il Giappone di fianco all’Alaska separate dallo stretto di Bering. Vera spina dorsale del continente euroasiatico, la penisola della Kamchatka rappresenta l'estremità del mondo. Una regione così remota, che il termine stesso di Siberia non è più valido: gli si preferisce quello di Estremo Oriente Russo.

Se si decide di mostrare il tooltip in molte immagini allora è meglio inserire i CSS nel modello. Si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla

.descrizione {
position: relative;
margin: 10px auto;
}
.descrizione img {
width:400px; /* Larghezza immagine */
border:1px dashed #036; /* Bordo immagine */
background-color:lightyellow; /* Colore sfondo immagine */
padding:5px; /* Spessore sfondo immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:320px; /* Larghezza tooltip */
font-size:15px; /* Dimensione font */
font-family: Georgia; /* Famiglia dei caratteri */
top: 5%;
left: 2%; /* Posizionamento inizio del tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: brown; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.descrizione:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}

per poi salvare il modello. Quando si posta una foto in un post con questo effetto dovremo andare in Modalità HTML e usare un codice così strutturato

<div class="descrizione"> <a href="#"> <img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span> </a> </div>

I tag evidenziati di giallo servono se si vuole aggiungere un collegamento per aprire una pagina web con il click sulla foto. L'URL del collegamento si inserisce al posto del cancelletto (#).