CSS: didascalia a comparsa

Il problema maggiore delle transizioni CSS3 è che si tratta di effetti legati si agli stati di un elemento ma solo all'elemento su cui la transizione viene registrata. Per questo motivo non è possibile estendere l'effetto ai figli dell'elemento usando gli stati dell'elemento genitore. Nel caso di una didascalia a comparsa occorre usare uno stratagemma per unire l'elemento che contiene il testo all'immagine. Vediamo come.

Abbiamo questa struttura HTML che volendo possiamo ripetere:

<a href="#">
		<span>Un albero nella notte</span>
		<img src="albero.jpg" alt="Un albero" />
</a>

Lo stratagemma è questo: posizioniamo l'elemento con la didascalia all'interno del link in modo che le dimensioni dei due elementi coincidano. In questo modo puntando il mouse sull'immagine otteniamo la transizione voluta (le dimensioni sono uguali a quelle dell'immagine):

a {
	display: block;
	width: 320px;
	height: 240px;
	padding: 0;
	margin: 0 auto;
	text-decoration: none;
	position: relative;
}


a img {
	border: none;
}


a span	{
	opacity: 0;
	width: 320px;
	height: 240px;
	position: absolute;
	top: 0;
	padding: 5px;
	text-align: center;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
	color: #000;
	font: 1em Arial, sans-serif;
}


a span:hover {
	top: 245px;
	opacity: 1;
}	

La proprietà display e visibility non possono essere oggetto di una transizione. Per questo motivo ricorriamo all'opacità dell'elemento al fine di nasconderlo.

Potete visionare l'esempio finale in questa pagina.