HTML<ul class="thumb">

<ul class="thumb">

<li><img src="http://file.mobilmusic.ru/09/68/da/803960.gif" alt="" width="150" height="180" /></li>

<li><img src="http://file.mobilmusic.ru/63/5e/bc/1281199.gif" alt="" width="150" height="180" /></li>

<li><img src="http://file.mobilmusic.ru/fa/66/47/699794.gif" alt="" width="150" height="180" /></li>
<li>Con amor. GloriaV</li>

</ul>

</ul>

CSS<style><!--/* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */ /* por ese motivo, debo dimensionarla con width y height */ 
ul.thumb { 
float: left; 
height: 400px; 
list-style: none; 
margin: 0; 
position: relative; 
width: 300px; 
} /* cada item es una imagen que fuerzo a que se muestren pequeñas */ 
ul.thumb li { 
/* se posicionand e manera absoluta */ 
position: absolute; 
left: 80px; 
top: 0; 
z-index: 0; 
/* algo de decoración */ 
background-color: #; 
box-shadow: 0 0 10px #444 inset; 
padding: 4px; 
/* el tamaño de la imagen a mostrar */ 
height: 202px; 
width: 150px; 
/* la transición será el efecto */ 
-moz-transition: all 1s ease-in-out 0s; 
-webkit-transition: all 1s ease-in-out 0s; 
-o-transition: all 1s ease-in-out 0s; 
} 
ul.thumb li img { 
height: 100%; 
width: 100%; 
} 

/* cada item se posiciona y se rota a gusto */ 
ul.thumb li:nth-child(1) { 
-moz-transform: rotate(20deg); 
-webkit-transform: rotate(20deg); 
-o-transform: rotate(20deg); 
margin-left: 150px;
margin-top: 0px; 
} 
ul.thumb li:nth-child(2) { 
-moz-transform: rotate(-30deg); 
-webkit-transform: rotate(-30deg); 
-o-transform: rotate(-30deg); 
margin-top: 0px; 
} 
ul.thumb li:nth-child(3) { 
-moz-transform: rotate(-15deg); 
-webkit-transform: rotate(-15deg); 
-o-transform: rotate(-15deg); 
margin-left: 240px;
margin-top: 0px; 
} 
ul.thumb li:nth-child(4) { 
-moz-transform: rotate(10deg); 
-webkit-transform: rotate(10deg); 
-o-transform: rotate(10deg); 
margin-left: 100px;
margin-top: 150px; 
} 
/* el efecto al poner el cursor encima */ 
ul.thumb li:hover { 
/* se elimina la rotación */ 
-moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
/* se muestra la imagen con su tamaño real */ 
height: 275px; 
width: 300px; 
/* se la posiciona y se la pone en primer plano */ 
margin-left: 0px; 
margin-top: -50px; 
z-index:10; 
/* algo de decoración */ 
border-radius: 10px; 
padding:20px; 
}
--></style>