Vamos a crear un sencillo efecto tipo Polaroid ideal para galerías de fotos o resaltar imágenes o enmarcar un elemento importante dentro de una web, el efecto es ni mas ni menos que doce fotos super mal puestas que cuando le das clic con el cuesor se cambian mui interesante este Widget.

Sin mas os dejo los codigos para que podáis instalarlo.

Una de las opciones de la galería es que puedes cambiar de fotografía, con la tecla de tabulación o TAB.

También se puede agregar por separado, copiar todo lo que esta entre las etiquetas <style> </style>, ahora nos vamos a Plantillas | Editar HTML, buscamos(Ctrl+F) la etiqueta ]]></b:skin>, pegar antes de dicha etiqueta y le damos guardar.

Y Ahora nos toca agregar el html de la galería,copia desde la etiqueta <center> hasta </center> y pega en un Html/JavaScript o en una entrada en HTML y listo.

Para agregar esta galería de fotos en base a CSS3, solo hay que pegar el siguiente código donde quieras que se vea.

<style>
.polaroidgal{
margin: 0px auto 0;
width: 600px;
}
.polaroidgal 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;
}
.polaroidgal 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;
}  
.polaroidgal a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.polaroidgal 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);
}  
.polaroidgal 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);
}  
.polaroidgal a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}  
.polaroidgal a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}  
.polaroidgal a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}  
.polaroidgal a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}  
.polaroidgal a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
 transform: rotate(20deg);
}  
.polaroidgal a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}  
.polaroidgal a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}  
.polaroidgal 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>

Y ahora solo hay que cambiar lo de color azul por la url de las imágenes.