Supponiamo di voler associare un titolo o una descrizione ad un’immagine. Questa mini guida spiega come, tramite i posizionamenti, è possibile allegare del testo ad una immagine.

image-title

La soluzione proposta è cross-browser è perfettamente in linea con gli standard attuali…

Il codice html di base è il seguente:



Titolo dell'immagine

Scriviamo il CSS basandoci sulla classe .titimg e sui suoi elementi derivati:

.titimg{
margin:5px;
position:relative;
}

.titimg img{
border: 3px solid #333;
}

.titimg h4{
margin: 0px;
padding: 0px;
position:absolute;
bottom:5px;
left:0px;
background: #333;
color: #FFF;
padding:0 5px;
text-transform:uppercase;
font-family:trebuchet ms, verdana;
font-size: 0.70em;
font-weight: lighter;
}

L’aspetto è facilmente modificabile agendo sulle proprietà del titolo. Questa tecnica sfrutta il posizionamento assoluto dell’elemento h4 (absolute) in relazione al suo contenitore .titimg (relative)

Download

Ecco l’esempio da scaricare:
Image Title (38)

Se stai cercando nuove risorse sui fogli di stile visita il canale CSS di webquadro

Ecco una lista di altre risorse che potrebbero interessarti:

  1. CSS – Menu a tendina (dropdown menu) a tre livelli
  2. Mostrare lo stato di twitter nel tuo blog
  3. Reset di un foglio di stile CSS