CSS: slider di contenuti ad espansione con transizioni

Con l'introduzione delle transizioni CSS3 è ora possibile creare effetti molto interessanti sugli elementi. In questo articolo vedremo come realizzare uno slider di contenuti che si espande al passaggio del mouse.

Partiamo dalla seguente struttura HTML:

<div id="slideshow">
	<div class="slide s1">
		<div class="caption">1. Lorem ipsum dolor sit amet</div>
	</div>
	<div class="slide s2">
		<div class="caption">2. Lorem ipsum dolor sit amet</div>
	</div>
	<div class="slide s3">
		<div class="caption">3. Lorem ipsum dolor sit amet</div>
	</div>
	<div class="slide s4">
		<div class="caption">4. Lorem ipsum dolor sit amet</div>
	</div>
</div>

Ciascuna slide verrà spostata inizialmente verso destra in modo tale che solo una porzione del suo contenuto sarà visibile prima del passaggio del mouse. Quindi al passaggio del mouse ogni slide verrà riportata nella posizione originaria creando così l'effetto di espansione:

#slideshow {
 width: 500px;
 height: 330px;
 margin: 2em auto;
 overflow: hidden;
 position: relative;
 background: #ccc;
 border: 4px double #999;
}

#slideshow div.slide {
 width: 500px;
 height: 330px;
 position: absolute;
 top: 0;
 cursor: pointer;
 z-index: 1;
 -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;
}

#slideshow div.slide div.caption {
 height: 2em;
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.5);
 color: #fff;
 line-height: 2;
 text-indent: 0.5em;
}

#slideshow div.s1 {
 left: 100px;
  background: #c14545;
}
#slideshow div.s2 {
 left: 200px;
  background: #f96;
}
#slideshow div.s3 {
 left: 300px;
  background: #d1c0c0;
}
#slideshow div.s4 {
 left: 400px;
  background: #666;
}
#slideshow div.slide:hover {
 left: 0;
 z-index: 2;
}