Come aggiungere la descrizione in una immagine con il CSS.

Come mostrare una descrizione o un titolo con colore e sfondo personalizzato trasparente sopra una immagine nella parte alta o in quella bassa.

Gli utenti di Blogger possono inserire una descrizione in una immagine utilizzando l'Editor della piattaforma. Dopo aver cliccato sulla icona per l'inserimento della foto e averla selezionata da un album di Picasa o averla caricata dal computer si potrà aggiungere al post.

Per la didascalia si clicca sulla immagine per selezionarla nell'Editor quindi si sceglie Aggiungi Didascalia e si digita il testo che sarà mostrato sotto alla foto in posizione centrale. Si tratta di una scelta estetica minimalista che può essere migliorata con il CSS.

Invece di mostrare una didascalia sotto a una immagine possiamo inserire un testo direttamente sulla foto in alto o in basso con colori e sfondo personalizzabili. Per prima cosa dobbiamo caricare la nostra immagine su Picasa per poi ottenerne il link diretto. Per pubblicarla con una descrizione in un nostro articolo dovremo incollare nell'Editor in Modalità HTML un codice con questa sintassi

<style>
.descrizione1 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione1 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione1::before {
content: attr(title);
position: absolute;
background: rgba(255, 240, 0, 0.4); /* Colore dello sfondo */
color: #111; /* Colore del testo */
font-size: 20px; /* Dimensione caratteri */
font-weight:bold; /* Grassetto */
padding: 5px;
right: 0;
top: 0;
left: 0;
text-align: center;
z-index: 1;
}
</style>
<div style="width:500px; padding:10px; margin:0 auto;"><div class='descrizione1' title='Skyline di New York nel 2009'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6liZrp1zIiesAOXKtJZOvkhitscavhvSKLIzB7PArNGKWvXBBMczeTQ9FPv4dFNn71MQFk78pnUuNPpJom1b-e_NwF-I3Jtt8GcVmUx3XDcL7mfHbSj8VNM1ERT1cvoRoxLYIoJj5M0/s500/new-york-2009.jpg'/></div></div>

che deve essere incollato nel punto in cui mostrare l'immagine. Il risultato sarà il seguente

Se volessimo mostrare la descrizione della foto in basso si dovrà sostituire  top: 0; con bottom: 0; mentre i codici dei colori possono essere personalizzati a piacere. L'URL della immagine è quella colorato di viola e la descrizione è l'espressione colorata di blu.  

Si possono modificare anche le dimensioni dei caratteri del testo e togliere il grassetto. Concludo ricordando che il valore 0.4 nella quartina RGBA determina la quantità di opacità settata al 40%. Con una opacità 1.0 (100%) non ci sarà trasparenza mentre con 0.3 la trasparenza sarà superiore.