Navegando por la red, en afan de mejorar mi web y de aprender, encontre este efecto muy interesante, espero que os guste.
Para empezar vamos a crear el HTML para la galería polaroid , todo lo que vamos a hacer para ello es mostrar imágenes envueltas en una relación etiqueta de anclaje.
Los enlaces que se necesita un atributo title que vamos a utilizar esto como el texto del título de la imagen.
"
Copiar en el archivo donde se van a incluir las fotos y cambiar las rutas de las imagenes"
<div class="polaroid-images">
<a href="" title="Cave"><img height="200" src="images/water.jpg" alt="Cave" title="Cave" /></a>
<a href="" title="Island"><img height="200" src="images/water2.jpg" alt="Island" title="Island" /></a>
<a href="" title="Islands Forest"><img height="200" src="images/water3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
<a href="" title="Decking"><img height="200" src="images/water4.jpg" alt="Decking" title="Decking" /></a>
<a href="" title="Lake"><img height="200" src="images/water5.jpg" alt="Lake" title="Lake" /></a>
<a href="" title="Mountains"><img height="200" src="images/water6.jpg" alt="Mountains" title="Mountains" /></a>
<a href="" title="Forest"><img height="200" src="images/water7.jpg" alt="Forest" title="Forest" /></a>
<a href="" title="Coast Valley"><img height="200" src="images/water8.jpg" alt="Coast Valley" title="Coast Valley" /></a>
</div>
Para la imagen polaroid vamos a estilo el enlace envuelto alrededor de la imagen, se trata de lo que podemos utilizar el atributo título como el texto de la leyenda en la parte inferior de la imagen. Por eso vamos a estilo la etiqueta de ancla con el fondo blanco y el relleno para crear la apariencia polaroid.
En la parte inferior de la imagen que tenemos el relleno a ser más grandes que las otras partes ya que es donde vamos a colocar el texto del título.
Añadir el siguiente CSS con el estilo de sus imágenes como una foto polaroid.
"Añadir al CSS del estilo principal de la pagina"
.polaroid-images a
{
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
Por el momento no hay una leyenda debajo de la imagen, aquí es donde tenemos que utilizar la pseudo clase: después de crear un nuevo elemento después de la etiqueta de anclaje. La ventaja de hacer esto es que podemos usar el contenido de la propiedad CSS para obtener el atributo title de la etiqueta de anclaje.
Agregue el siguiente para agregar el título a la imagen.
.polaroid-images a:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
Para asegurarse de que la imagen siempre se ajustan a la zona polaroid, añada la siguiente línea.
.polaroid-images img {
display: block;
width: inherit;
}
Girar las imágenes
Sólo mostrar las imágenes que se parecen a una imagen polaroid no es suficiente, tenemos que añadir un poco más de interacción con las imágenes. Podemos hacer que parezca que las imágenes acaban de ser derribado para que recoger. Para que las imágenes parecen haber sido arrojado podemos rotarlas ligeramente en un orden aleatorio.
Para crear las rotaciones aleatorias que utilizamos el selector nth-child que pasar por todas las imágenes y rotarlas diferente dependiendo de qué orden se colocan en la página.
.polaroid-images a:nth-child(2n)
{
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);
}
Para crear un movimiento recogido podemos utilizar el evento libración del ratón. Como las imágenes se gira ligeramente en la pantalla el evento vuelo estacionario se escala de la imagen y restablecer la rotación de nuevo a cero.
En el caso de la libración ponemos el giro de nuevo a 0, añada una escala de 120% y añadir una sombra al cuadro de la caja para que parezca que se está alejando de la página.
.polaroid-images a:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index:10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
Esa es toda la CSS que es necesaria para crear una galería de imágenes polaroid.
Codigo y fuente obtenidas de un tutorial en ingles de dominio publico.http://www.paulund.co.uk/create-polaroid-image-with-css