Mirad que presentacion tan genial para mostrar imagenes. Tienen un aspecto identico a las famosas Polaroid, estan desordenadas dentro de un orden y al clickear con el cursor sobre cualquiera de ellas, aparececen en primer plano acompañadas de una pequeña animacion. Y todo esto esta completamente realizado con estilos CSS (CSS3), con puras propiedades como: user-select, box-sizing, transition, box-shadow y transform, sin utilizar ningun tipo de Javascript.

En esta galeria de fotos puedes hacer click sobre la imagen para obtener un efecto de zoom y utilizando la tecla Tab del teclado, pasaras a ver la siguiente foto.

Si te gusta y quieres ponerla en tu blog o web, copias el siguiente codigo y lo pegas alli donde quieras mostrarla. Donde esta indicado en color rojo, tienes que añadir las urls de las imagenes que quieres que aparezcan en la presentacion.

-------------------------------------------------------------------------------------------

<center><div class="galeriapol">  

<a tabindex="1"><img src="URL DE LA IMAGEN"></a>   

<a tabindex="2"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="3"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="4"><img src="URL DE LA IMAGEN"></a>   

<a tabindex="5"><img src="URL DE LA IMAGEN"></a>    

<a tabindex="6"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="7"><img src="URL DE LA IMAGEN"></a>    

<a tabindex="8"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="9"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="10"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="11"><img src="URL DE LA IMAGEN"></a>     

<a tabindex="12"><img src="URL DE LA IMAGEN"></a>      

</div></center>

<style>

.galeriapol{     

margin: 0px auto 0;   

width: 600px;   

}     

.galeriapol a {

display: inline-block;

height: 135px;

position: relative;

width: 180px;

-moz-user-select: none;

 -webkit-user-select: none;

-khtml-user-select: none;

user-select: none; 

} 

.galeriapol a img { 

border: 8px solid #fff;

border-bottom: 20px solid #fff; 

cursor: pointer;

display: block; 

left: 0px;

 position: absolute;

top: 0px;

width: 100%;

z-index: 1;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

 -o-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease; 

 -o-transition: all 1.0s ease;

transition: all 1.0s ease;

-moz-box-shadow: 2px 2px 4px #444;

 -webkit-box-shadow: 2px 2px 4px #444;

-o-box-shadow: 2px 2px 4px #444;

box-shadow: 2px 2px 4px #444;

}      

.galeriapol a:nth-child(1) img { 

 -moz-transform: rotate(-25deg); 

-webkit-transform: rotate(-25deg); 

transform: rotate(-25deg); 

} 

.galeriapol a:nth-child(2) img { 

-moz-transform: rotate(-20deg); 

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

}      

.galeriapol a:nth-child(3) img { 

-moz-transform: rotate(-15deg);

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

}      

.galeriapol a:nth-child(4) img {

 -moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

 transform: rotate(-10deg);

}      

.galeriapol a:nth-child(5) img {

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg); 

 transform: rotate(-5deg);

}      

.galeriapol a:nth-child(6) img { 

-moz-transform: rotate(0deg); 

-webkit-transform: rotate(0deg); 

transform: rotate(0deg);

}      

.galeriapol a:nth-child(7) img {

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}      

.galeriapol a:nth-child(8) img {

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg); 

}      

.galeriapol a:nth-child(9) img { 

-moz-transform: rotate(15deg); 

-webkit-transform: rotate(15deg); 

transform: rotate(15deg);

}      

.galeriapol a:nth-child(10) img {

-moz-transform: rotate(20deg);

-webkit-transform: rotate(20deg);

 transform: rotate(20deg);

}      

.galeriapol a:nth-child(11) img {

-moz-transform: rotate(25deg);

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}      

.galeriapol a:nth-child(12) img {

-moz-transform: rotate(30deg);

 -webkit-transform: rotate(30deg);

transform: rotate(30deg);

}      

.galeriapol

 a:focus img { 

cursor: default;

height: 250%; 

left: -150px;   

 top: -100px;  

position: absolute;

width: 250%;

z-index: 25;

-webkit-transition: all 1.0s ease;

    -moz-transition: all 1.0s ease;

 -o-transition: all 1.0s ease; 

 -moz-transform: rotate(0deg); 

-webkit-transform: rotate(0deg); 

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

</style>