Far apparire la didascalia su una immagine nello stato hover con i CSS

Perchè "nascosta"? Perchè quando si apre la pagina vedremo solo l´immagine; quando, invece, passeremo con il mouse su di essa, apparirà la descrizione su uno sfondo semitrasparente in modo tale da leggere il testo e vedere, sotto di esso, parte della foto, sul background opaco. Il codice CSS di cui ci avvarremo, è davvero poco e molto molto semplice. Cominciamo.

Il codice CSS

Prevedendo di utilizzare una immagine con dimensioni pari a 500 per 300 pixel, dobbiamo realizzare il contenitore per posizionarla all´interno, che ho nominato #foto.

#foto{
margin:0; 
padding:10px; 
height:300px;
position:relative; 
border-top: 1px solid #ddd; 
border-right: 1px solid #666; 
border-bottom: 1px solid #666; 
border-left: 1px solid #ddd;
background-color: #fff;
width: 500px;
}  

Da notare che al contenitore ho assegnato un padding di 10 pixel e dei bordi di 1 pixel, in modo da dare alla foto un effetto "tridimensionale", vale a dire come se fosse poggiata su un piano leggermente in rilievo. Questo è importante non solo per l´effetto "visivo", ma ci serve anche per fare dei calcoli al fine di avere una omogenea resa su più browser.

Mi sono avvalso della tecnica di Tantek [per quanto riguarda il box model] e così, nella parte finale del codice ho impostato prima la larghezza massima del contenitore [522 pixel], all´ultimo rigo la sua larghezza effettiva. In ultimo ho dichiarato il box con una posizione relativa, perchè al suo interno avremo degli elementi con posizionamento assoluto. Annulliamo margini, padding e bordi alle immagini con il seguente codice:

img{
margin:0;
padding:0;
border:none; 
}  

L´elemento span

Introduciamo adesso l´elemento span che ci permetterà di avere lo sfondo opaco. Esso nello stato di link non visitato, non deve essere visibile, quindi avremo:

#foto a span{ 
position:absolute; 
left:-9999px; 
text-decoration:none;
}  

Nello stato :hover, invece, deve avere le seguenti caratteristiche:

#foto a:hover span{ 
position:absolute; 
top:10px; 
left:10px; 
width:500px;
height:100px; 
font-weight:bold;
background:#fff; 
color:#000; 
padding:5px 0 5px 0;
font-size:90%; 
filter:alpha(opacity=40);
-moz-opacity:.4;
opacity:.40;
}  

Ho scritto prima che all´interno del box #foto avremmo avuto elementi con posizionamento assoluto; mi riferivo proprio allo "span" in oggetto. L´ho posizionato a 10 pixel dall´alto e da sinistra. Largo quanto la foto [500 pixel], alto 100 pixel, con uno sfondo di colore bianco, e con una opacità pari a 40. A proposito della opacità, in precedenza, ho scritto qualche articolo, quindi non è il caso di soffermarmi. Piccola annotazione: per l´esempio in questione ho impostato, al tag span, un´altezza di 100 pixel. Se le vostre descrizioni conterranno più o meno testo, potrete aumentarla o diminuirla. Questo è tutto quello che ci serve per ottenere la descrizione nascosta su una foto e nel file di esempio che ho preparato, potremo vedere il codice in azione.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati