CSS: pannelli animati con i CSS3

Possiamo creare l'effetto dei pannelli animati usando le transizioni CSS3 e le immagini di sfondo. Per ottenere l'effetto che vogliamo utilizzeremo le proprietà background-color e background-position. Vediamo insieme i dettagli.

Partiamo da questa semplice struttura HTML:

<div id="panel">
	<h2>Lorem ipsum dolor</h2>
	<p>Ideo autem aquis consectetur elit set diam nonnummi.</p>
</div>

Useremo le transizioni CSS3 sulle due proprietà citate prima intercettando il passaggio del mouse sul pannello:

#panel {
	width: 35em;
	padding: 2em;
	background-color: #fff;
	background-image: url(img/tag.png);
	background-repeat: no-repeat;
	background-position: 120% 0;
	border: 1px solid #c4c4c4;
	margin: 0 auto;
	-moz-transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

#panel:hover {
	background-color: #c4c4c4;
	background-position: 100% 0;
}

Potete visionare l'esempio finale qui di seguito.