Mil Trucos Blogger

Galería de imágenes realizada con CSS

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

Hola amigos de Mil Trucos Blogger, en el día de hoy veremos como añadir una sencilla galería de imágenes para Blogger, la cual está realizada íntegramente con CSS, por lo que es de carga muy ligera.

Galería de imágenes realizada con CSS

galeria-de-imagenes-blogger

Demo del Truco

Para agrega este truco a tu blog ve a plantilla, Editar HTML y antes de ]]></b:skin>  pega lo siguiente:

/* Contenedor general del visor */
.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%; /* 100/nºimágenes, 4 en el ejemplo */
margin:1px;
border: 3px solid black;
opacity: 1;
}
/* Estilo imagen principal */
.grande {
width:100%;
position: absolute;
top: 800px; /* Valor mayor que alto contenedor para ocultar todas las imágenes */
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
/* Relleno inicial del espacio para imagen principal */
.muestra {
opacity: .3;
width: 200%;
top: 170px;
}
/* Marcamos con un borde la miniatura seleccionada */
a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}
/* Movemos con transición la imagen seleccionada a la zona visible */
a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Ahora en Diseño, Añadir gadget, HTML/JavaScript añade lo siguiente:

<div class="contenedorvisor">
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN1" />
<img class="grande" src="URL_IMAGEN_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN2" />
<img class="grande" src="URL_IMAGEN_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN3" />
<img class="grande" src="URL_IMAGEN_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN4" />
<img class="grande" src="URL_IMAGEN_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGEN_ORIG1" />
</a>

</div>

Reemplaza lo resaltado en color azul por lo que se indica en cada caso.

Si el tutorial te ha gustado, no olvides compartirlo en tus redes sociales.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo