Tutorial: Cómo dar efecto de fotografías apiladas a tus imágenes con CSS

¡Comparte el tutorial!

Tweet

Bienvenidos a un nuevo tutorial para Blogger, mi categoría favorita para hacer tutoriales (aunque sea la categoría que menos tutoriales tenga jajaja).


El efecto que les traigo ahora es uno muy bonito con CSS, muy fácil de implementar, y realiza una simulación de imágenes apiladas una sobre otras.

¿Que necesitamos?

* Un blog

Dificultad

Fácil

Paso 1:

Bien, primero veamos el efecto que lograremos con este tutorial:

Si te ha gustado ahora vamos a implementarlo.
Lo primero será ir a la plantilla de nuestro blog y buscaremos la siguiente linea:

]]></b:skin>

Y justo arriba de ella pegamos lo siguiente:

.separator {
margin: 20px;
text-align: center;
clear: both;
}
.separator a {
display: table;
position: relative;
z-index: 10;
max-width: 94% !important;
margin: 10px auto !important;
}
.separator img {
display: table-cell;
max-width: 100% !important;
padding: 10px;
background: #fff;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.separator a:before, .separator a:after {
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
}
.separator a:before {
z-index: -2;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.separator a:after {
z-index: -3;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.separator a:hover:before, .separator a:hover:after {
top: -2px;
left: 2px;
bottom: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

Muy bien, ahora guardamos los cambios y listo, ya podemos subir imágenes a nuestro blog y podremos visualizar este bonito efecto.

¡IMPORTANTE!
Para que el efecto sea visible es muy importante dejar tus imagenes con el enlace que Blogger genera por defecto, o bien, encerrar tu imagen tal como se muestra en el siguiente código:

<div class="separator">
<a href="javascript:void();">
<img src="URL_DE_TU_IMAGEN" />
</a></div>

Espero que este bonito efecto con CSS para tu blog te sea de utilidad :)

Fin del tutorial