Galeria de imagenes en CSS

[vengiss]

Hola,

Estoy haciendo una galeria de imagenes para un sitio web utilizando solo CSS (por los momentos) donde en la parte superior me muestre una lista de imagenes pequeñas o "thumbnails" y luego de darles click me muestre la imagen en grande en la parte inferior.

Los thumbnails los estoy mostrando como una lista usando 2 columnas de 7 imagenes (actualmente solo tengo 7 imagenes mientras pruebo), pero se me presentaron dos problemas:

1. No puedo colocar la imagen en miniatura en los thumbnails de la imagen grande.
2. No puedo mostrar la imagen cuando se hace "click" en la imagen sino cuando hago hover (estoy usando li:hover como prueba)

Ahora mi pregunta, existe la manera de solucionar esos problemas utilizando solo CSS? O es necesario utilizar JS o alguna otra herramienta? He buscado algunas galerias pre-diseñadas pero las que he encontrado full CSS no funcionan como me gustarian y las que si utilizan JS.

Aqui les coloco el codigo CSS y la seccion respectiva:

Código:

/* Galeria de Imagenes */

#lista-galeria {
	list-style-type: none;
	margin-left: 8px;
}

#lista-galeria li {
	float: left; 
	display: block; 
	width: 60px; 
	height: 60px; 
	background-position: 50% 50%; 
	cursor: pointer; 
	border: 3px solid #fff; 
	outline: 1px solid #ddd; 
	margin-right: 14px; 
	margin-bottom: 14px;
}

#lista-galeria li a img {
	position: absolute;
	top: 640px;
	display: none;
	right: 80px;
	height: 440px;
	width: 600px;
	left: 465px;
	bottom: 0px;
}

#lista-galeria li:hover img {
	display:block;
}

#lista-galeria li:hover {
	outline-color: #bbb;
}

Codigo HTML:

Código HTML:

<ul id="lista-galeria">
      <li class="thumb"><a href="#"><img src="imagenes/galeria/alpine sunset.JPG" alt="Alpine Sunset" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/bandera española.JPG" alt="Bandera Española" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/belle de noit.JPG" alt="Belle de Noit" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/black magic.JPG" alt="Black Magic" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/blue rose.JPG" alt="Blue Rose" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/bolero.JPG" alt="Bolero" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/chicago peace.JPG" alt="Chicago Peace" /></a></li>
</ul> 

Nota: Estoy utilizando la etiqueta <a> con la propiedad a:active para que muestre la imagen al click pero no logro que funcione, solo he logrado que funcione con li:hover y li:active (solo la muestra mientras se presiona el click en el item).