IMÁGENES APILADAS EN BLOGGER

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 imágenes.

A mí me ha encantado dicho efecto, y por eso me ha 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

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

Remplaza las imágenes y el enlace de las imágenes por las tuyas

 Fecha de la Publicación; 18-01-2019

 Fuente; aizumblog

 Publicado por;