Galería de imágenes con efectos
Hola a todos...!; ya estamos de regreso, (yo y mi otro yo)
con mucha energía y ganas de seguir compartiendo cosas con todos ustedes.Después de haber visto este menú minimalista, pensaba como quedaría ese mismo efecto en una galería de imágenes, en donde se pueda agregar texto, mismo que es visible al poner el puntero del ratón encima de la imagen, (hover) y crear el efecto de deslizamiento en el texto que se ve muy cool, y que es fácil de lograr por medio de transiciones, que son propiedades que permiten crear efectos o animaciones, estilo flash.
Aunque el efecto de la transición no es visible en Internet Explorer, solo en Firefox 4+, Google Chrome, Safari 3.2+ y Opera 10.5+…, si aparece el texto al poner el puntero encima de la imagen en ese navegador, o en versiones antiguas de estos últimos que les menciono, por lo que se puede usar sin problemas.
En esta galería, podemos agregar un enlace a la imagen, para que al hacer click sobre esta, vayamos a cualquier página de nuestro blog, u otra página.
Para agregarla a tu blog, la puedes poner en una página estática, en la sección del crosscol, u otra sección que hayas creado, eligiendo la opción HTML/Javascript.
Empecemos:
Este es el CSS, en donde declararemos la apariencia que tendrá nuestra galería, y que pondrás en el campo de Añadir CSS, yendo a Diseño ► Diseñador de Plantillas ►Avanzado ► Añadir CSS, y que editarás con las medidas de las imágenes que vayas a usar, y siguiendo todas las indicaciones entre: /*...*/ respectivamente:
ul#galeria {...y el HTML que es el siguiente, que puedes poner en una página estática, o en cualquier sección de la plantilla dentro de un widget, eligiendo la opción de HTML/Javascript, y donde necesitas editar lo marcado con rojo:
width:100%;
margin: 30px 0 0 20px; /* el margen de la galería */
padding:0;
}
ul#galeria li {
margin: 0 20px 20px 0; /*la separación entre cada elemento o imagen */
padding: 0;
border: 1px solid #cccccc;
float: left;
list-style: none;
}
ul#galeria li a {
background-color: #faf7ec; /*el color de lo que será el marco de la imagen*/
height:180px; /*la altura, que deberá ser la misma que la de la imagen*/
width:260px; /*el ancho que deberá ser el mismo que el de la imagen*/
display: block;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 3px; /*el padding que le dará amplitud al marco*/
font-size: 19px; /*el tamaño del texto que se mostrará en el efecto hover*/
color:#ffffff; /*el color del texto*/
text-align: center; /*centramos el texto*/
text-decoration: none; /*eliminamos subrayado del texto*/
white-space: nowrap; /*evitamos el salto en linea del texto*/
}
ul#galeria li img {
width: 260px; /*el ancho de la imagen*/
height: 180px; /*el alto de la imagen */
margin: 0;
padding: 0;
border: none;
}
ul#galeria span{
width:0;
height: 0;
left: 0;
top: 0;
padding:0;
margin: 0;
position: absolute;
overflow: hidden;
}
ul#galeria span, ul#galeria li a{
/* Transición para los distintos navegadores */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
ul#galeria li a:hover { /*efecto hover*/
background-color: #ffffff; /*el color de fondo de lo que será el marco*/
/*sombras para los distintos navegadores no en versiones anteriores de IE9*/
-webkit-box-shadow:0px 0px 30px #0A122A;
-moz-box-shadow: 0px 0px 30px #0A122A;
box-shadow: 0px 0px 30px #0A122A;
}
ul#galeria li a:hover span{ /*el texto oculto que se ve en el hover*/
width: 260px; /*el ancho del fondo del texto */
top: 0;
left: 3px; /*lo movemos tomando en cuenta el padding que dimos para ampliar el marco*/
height: 25px; /*la altura del fondo del texto*/
margin: 148px 0 0 0; /*el margen para bajarlo al fondo*/
padding: 5px 0; /*el padding arriba y abajo para separarlo del texto*/
background-color: #000000; /*el color de fondo del texto*/
/*opacidad en los distintos navegadores*/
opacity: .7;
filter:alpha(opacity=70);
overflow: visible;
cursor: pointer;
}
<ul id="galeria">En el código anterior, puedes agregar 4 imágenes, están separados en bloques, para que puedas identificar el que correponde a cada imagen, y si quieres agregar más imágenes, necesitas repetir todo lo que esta entre <li>...</li>, es decir, esta parte:
<li><a href="#"><img alt="" src="URL_DE_LA IMAGEN"/><span>Texto a mostrar en el hover</span></a></li>
<li><a href="#"><img alt="" src="URL_DE_LA IMAGEN"/><span>Texto a mostrar en el hover</span></a></li>
<li><a href="#"><img alt="" src="URL_DE_LA IMAGEN"/><span>Texto a mostrar en el hover</span></a></li>
<li><a href="#"><img alt="" src="URL_DE_LA IMAGEN"/><span>Texto a mostrar en el hover</span></a></li>
</ul >
<li><a href="#"><img alt="" src="URL-DE LA IMAGEN"/><span>Texto a mostrar en el hover</span></a></li>En donde dice:
alt=”” escribe dentro de las comillas, una descripción corta de la imagen.
Lo que esta dentro de <span>...</span> es el texto que aparecerá al poner el puntero del ratón, sobre la imagen.
Y en el "#" (gatito) deberás poner la URL de la página a donde quieres ir, al hacer click sobre la imagen; cuida no borrar las comillas al principio y al final.
Notas importantes:
- Si vas a agregar la galería a una página estática, en el código HTML, arriba mencionado, cámbia :
<span>Texto a mostrar en el hover</span>por:
<span style="border: 0;">Texto a mostrar en el hover</span>Si te fijas solo estamos agregando: style="border: 0; esto por que, como la etiqueta span está
- Aunque puedes usar imagenes más grandes, que las que declaramos en el CSS, te recomiendo usar imágenes del mismo tamaño, para que estas ocupen menos espacio.
- Si quieres que el bloque del texto no se desplace de arriba hacia abajo, y solo se deslice desde abajo, entonces, pon el mismo valor del margen (margin) que tiene ul#galeria li a:hover span en: ul#galeria span y listo.
Etiquetas:Tutoriales