Otro intento de galería CSS

Hacía tiempo que no me ponía a juguetear con las CSS. Tenía bastante abandonado el diseño web, pero vuelvo a la carga 🙂

Hace tiempo, mostré un ejemplo de galería (más o menos atractiva) usando hojas de estilo. Esta vez traigo otra galería que a lo mejor no resulta tan llamativa pero sí algo curiosa y exploraremos otra de las propiedades del CSS.

Antes de explicar (lo poco que hay que explicar), puedes ver la galería en funcionamiento, para que te hagas una idea.

La sucesión de imágenes está formada por una lista desordenada. Cada elemento de la lista contiene una imagen. Cada enlace a una imagen tiene el siguiente estilo:

.gallery a img { 
    position: relative;
    z-index: 1
    }

Lo que nos interesa es el atributo z-index. Este atributo nos permite asignar un orden de apilamiento entre los distintos objetos que haya en nuestra web. En este caso, le damos el valor 1, que es como indicarle la posición que ocupa esta capa en el resto de la web.

Ahora veamos el estilo para cuando se haga hover (cuando pasamos el puntero del ratón sobre el elemento):

.gallery a:hover img {
    z-index: 2;
    width: 500px;
    height: 334px
    }

Aquí z-index, tiene un valor 2. Los valores mayores hacen que los objetos se superpongan sobre los de menor valor. Esto es, la capa que contiene z-index:2 se pondrá encima que la anterior, que vale 1. Si tenemos otro elemento con un valor mayor en z-index, estaría por encima de todos los elementos más pequeños. Si, por el contrario, tuviésemos un elemento con un valor negativo o menor que los demás en z-index, sería la capa más «profunda», la que estaría en la posición más baja y estaría tapada por las demás.

Hay comentarios en la hoja de estilo y en el fichero XHTML (que podéis descargar). Podéis ir cambiando las propiedades para ver cómo varía. Si tenéis alguna pregunta, disparad 🙂

Enlaces relacionados

• Galería de imágenes usando CSS