galeria-efecto-escala-grises-css-jquery

Mediante CSS Sprites y JQuery podemos crear un efecto al aplicar :hover (posicionar el cursor encima) de un bloque, dándole a este una cambio de colores a escala de grises, como dice Sohtanaka. Esto puede resultar útil en portafolios, pero no recomiendo usarlo en proyectos grandes.

Estructura HTML

Primero crearemos una lista desordenada que la usaremos para crear la lista de imágenes de la galería:

<ul>
<li>
<a href="#"><span></span></a>
<h2><a href="#">Nombre de la imagen</a></h2>
</li>
</ul>
<ul class="gallery">

<li>

<a href="#" class="thumb"><span></span></a>

<h2><a href="#">Nombre de la imagen</a></h2>

</li>

</ul>

Cada lista contendrá una imagen agrupada en una etiqueta . Esta etiqueta será usada para recortar la imagen para mostrarla sólo en su estado por defecto. Fíjate en este esquema para verlo mejor:

paso1-ejemplo-galeria-efecto-escala-grises-css-jquery

Código CSS

Estilizaremos esta galería como cualquier galería, aplicando CSS a las listas y a las miniaturas. La única diferencia es que tenemos la etiqueta para cortar las imágenes y debemos estilizarla también:

ul.gallery {

width: 708px; /*--Ajustar el ancho acorde a tu documento--*/

list-style: none;

margin: 0; padding: 0;

}

ul.gallery li {

float: left;

margin: 10px; padding: 0;

text-align: center;

border: 1px solid #ccc;

-moz-border-radius: 3px;

-khtml-border-radius: 3px; 

-webkit-border-radius: 3px; 

display: inline; /*--IE6 Fix - Arregla el fallo de doble margen en IE6--*/

}

ul.gallery li a.thumb {

width: 204px; /*--Ancho de la imagen--*/

height: 182px; /*--Alto de la imagen--*/

padding: 5px;

border-bottom: 1px solid #ccc;

cursor: pointer;

}

ul.gallery li span { /*--Usada para cortar la imagen--*/

width: 204px;

height: 182px;

overflow: hidden;

display: block;

}

ul.gallery li a.thumb:hover {

background: #333; /*--Efecto hover para navegadores con js desactivado--*/

}

ul.gallery li h2 {

font-size: 1em;

font-weight: normal;

text-transform: uppercase;

margin: 0; padding: 10px;

background: #f0f0f0;

border-top: 1px solid #fff;

}

ul.gallery li a {text-decoration: none; color: #777; display: block;}

Código Javascript (JQuery)

Para todo el que no esté familiarizado con JQuery, puede echar un vistazo a su página oficial y aprender lo básico.

Vamos a llamar al archivo JQuery, que se encuentra alojado en Google. O también puedes descargarlo y subirlo a tu servidor, como desees. El código para llamar al archivo JS alojado en Google es este:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Se aplicará un efecto “fade” a la miniatura y se definirá una imagen de fondo en la etiqueta . Usando CSS Sprites posicionaremos la imagen con escala de grises en la parte inferior así cuando posicionemos el cursor encima de la miniatura, esta, mediante el efecto “fade”, nos mostrará la imagen con escala de grises.

El siguiente script contiene comentarios explicando las acciones que se producen con JQuery:

$(document).ready(function() {

$("ul.gallery li").hover(function() { //En hover...

var thumbOver = $(this).find("img").attr("src"); //Obtener la direccion de la imagen y asiganarla a 'thumbOver'

//Definir una imagen de fondo (thumbOver) en la etiqueta <a> - Definir la posicion en la parte inferior (bottom)

$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

//Animar la imagen a opacidad 0 (fade out)

$(this).find("span").stop().animate({opacity: 0}, 300);

} , function() { //on hover out...

//Animar la imagen a opacidad 100% (fade in)

$(this).find("span").stop().animate({opacity: 1}, 300);

});

});

Estandarización

XHTML 1.0 Transitional válido.

CSS 2.1 inválido (por propiedades CSS3).

Ejemplo de su funcionamiento

Ver ejemplo del funcionamiento de la galería

Vía | Sohtanaka