Imágenes apiladas en Blogger

by Blogs Famag - lunes, enero 02, 2017

Imágenes apiladas en Blogger

Me gustaría daros la bienvenida 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 las imagenes. 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.

Si quieres instalarlo en tu Blog sigue mis pasos:

¡Vamos ¡Vamos al Lío!

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

/* 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>