Descrizioni delle immagini con CSS
Tutorial css
Scopriamo come sia possibile aggiungere facilmente le descrizioni (tecnicamente note come caption) alle immagini utilizzando i CSS.
Ecco un esempio della tecnica applicata:
Ecco il codice HTML:
<div class="img-description"><img src="picture.jpg" alt="descrizione della foto" />
<cite>WebAir.it</cite></div>
ed ecco il CSS:
.img-description {
position: relative;
display: block;
height:335px;
width: 575px; //larghezza della foto
}
.img-description cite {
background: #FFFFFF;
filter:alpha(opacity=55);
opacity:0.55;
color: #000000;
position: absolute;
bottom: 0px;
left: 0px;
width: 555px; //larghezza della foto
padding: 10px;
border-top: 1px solid #999999;
}
Molto utile questa tecnica perchè permette di non dover editare graficamente un'immagine per aggiungerci la descrizione.