Añadir Imágenes apiladas en Blogger con efecto

By: Iván Dangerfield en sábado, diciembre 28, 2013
Ya es navidad y me gustaría daros la bienvenida a la navidad para compartir un truco para tus imágenes en Blogger, que puede ser de interés para algunos blogueros, que quieran o deseen cambiar la apariencia de sus imágenes al hacer hover, o al pasar por encima el cursor por mencionada imagen. A mi me ha encantado dicho efecto, y por eso me a encandilado y me ha motivado para escribir está entrada. El efecto trata de unas imágenes apiladas unas encima de otras, y al pasar el cursor por las imágenes o al hacer hover, se abren en abanico, expandiéndolas para visualizar el contenido de las mismas. Para ver la demo a continuación o seguidamente en el botón que verás más abajo, enjoy this:
Demostración del efecto!
Ahora vayamos a añadir el efecto en Blogger

1. Ves a Blogger
2. Y añade el siguiente código en un gadget
3. Es decir en Diseño y añades un gadget
4. Elige la opción Html y Javascript
5. Remplaza las imágenes
6. Y el enlace de las imágenes por las tuyas

/* Imágenes apiladas con efecto de Aizum Blog */
<style>
#aizum_imgstack{
width:300px;margin:0 auto;margin-top:2%;}
#aizum_imgstack a{
width:288px;
height:170px;
position:absolute;
display:block;
border:6px solid #f0f0f0;
border-radius:2px;
box-shadow:0 0 10px rgba(0,0,0,.3);
transition:margin .5s;
-webkit-transition:margin .5s;
}

#aizum_imgstack img{
width:288px;
max-height:100%;
}

#aizum_imgstack a:first-of-type{
margin-top:-5px;
margin-left:-20px;
transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}


#aizum_imgstack a:nth-of-type(2){
margin-top:-5px;
margin-left:-10px;
z-index:-1;
}

#aizum_imgstack a:last-of-type{
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
z-index:-2;
}

#aizum_imgstack:hover a:first-of-type{
margin-left:-310px;
margin-top:5px;
}

#aizum_imgstack:hover a:nth-of-type(2){
margin-top:-5px;}

#aizum_imgstack:hover a:last-of-type{
margin-left:290px;
margin-top:5px;
}

#aizum_imgstack a:first-of-type:hover,#aizum_imgstack a:last-of-type:hover{margin-top:-5px;
}

#aizum_imgstack a:nth-of-type(2):hover{margin-top:-10px;
}
</style>

<div id="aizum_imgstack">

<a href="Aquí_el_enlace">
<img src="http://4.bp.blogspot.com/-cQV65YoZbI8/Ur4QNedytGI/AAAAAAAASGY/SrDKt0VkQi4/s1600/animals-q-g-650-400-9.jpg" alt="effects" /></a>

<a href="Aquí_el_enlace">

<img src="http://4.bp.blogspot.com/--fhwWMum-E8/Ur4QRqAj18I/AAAAAAAASGg/rCglKIh5Cdg/s1600/animals-q-c-650-400-7.jpg" alt="effects" /></a>

<a href="Aquí_el_enlace">

<img src="http://3.bp.blogspot.com/-hnXyQru7JMQ/Ur4QWIrc_pI/AAAAAAAASGo/NdeS43Y5Ii0/s1600/technics-q-c-650-400-6.jpg" alt="effects" /></a>

</div>

Get free premium widgets for your blog and website.