Efecto imágenes apiladas

Efecto CSS muy fácil para simular que una imagen está apilada sobre otras.

Esto lo conseguiremos con tan solo añadir una porción de código a nuestra hoja de estilo. A partir de ahí sólo será cuestión de incorporar una caja (div) con una clase creada ad hoc dispuesta de manera que "rodee" la imagen. 

Todas las imágenes a las que les añadamos esa clase que en este ejemplo hemos nombrado como separator, se verán como si tuvieran dos imágenes más debajo algo desordenadas, por lo que he añadido una opción que hará que al pasar el puntero por encima de la imagen principal, se "cuadren" las que simulan estar debajo.


Suponiendo que ya tuviéramos la imagen, el HTML a añadir sería el que a continuación he marcado con color más oscuro:

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

Y el CSS que habría que añadir en nuestra plantilla sería el 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: 15px;
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);
}

Los pseudoelementos :before y :after no funcionan con imágenes y ese es el motivo por el que no podemos prescindir de la caja auxiliar y por el cual el código queda algo más largo de lo que en un principio sería necesario si no estuviéramos trabajando con img.

El detalle para Blogger

El detalle no es otro que el uso del nombre separator no es casual, sino que lo elegí de manera muy consciente. Resulta que esa caja auxiliar que ya he mencionado varias veces, la añade Blogger automáticamente siempre que subimos una imagen con el editor de entradas. Además le asigna una clase que ¿cuál diríais que es? Pues eso, separator.

Así que para Blogger no es necesario ir añadiendo la caja que rodea la imagen a mano, sino que simplemente deberemos añadir el CSS a la plantilla (entre las etiquetas skin) y después de eso TODAS las imágenes que subamos incorporarán este efecto sin necesidad de que toquemos el HTML.

Efecto reordenar imágenes

Bueno y falta lo del efecto para el hover. Simplemente habría que añadir al CSS esta regla adicional y listo:

.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);
}

Entrada ilustrada con una imagen de Monkeypainter y código inspirado fuertemente (vamos, casi plagiado) en una idea vista en Inspectelement.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter