Hola, tengo una galeria de imagenes en CSS, en una lista desordenada muestro la imagen en pequeño y al hacer click muestro la imagen en grande en una posicion absoluta dentro de mi pagina, actualmente estoy haciendo estoy con un script de javascrip pero quisiera hacerlo solo con css, los elementos de mi lista tienen el sig codigo:
Código:
<div id="galeria-thumbs">
<ul id="lista-galeria">
<li><a href="#"><img src="imagenes/galeria/alpine sunset.JPG" alt="Alpine Sunset" /><span>Alpine Sunset</span></a></li>
</div>
Imagen, posicion absoluta:
Código:
#lista-galeria li a img {
position: absolute;
top: 640px;
display: none;
right: 80px;
height: 440px;
width: 580px;
left: 462px;
bottom: 0px;
text-align:center;
border: 1px solid #999;
padding: 10px;
float: right;
}
Descripcion de la imagen (<span>), posicion absoluta:
Código:
#lista-galeria li a span {
display:none;
position: absolute;
left: 473px;
top: 590px;
width:580px;
text-align:center;
color: #036;
font-size: 120%;
background-color: #F2FCE0;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #6FA010;
border-bottom-color: #6FA010;
}
El problema es que cuando trato de darle estilo al atributo <a> simplemente no pasa nada, actualmente muestro la imagen grande y la descripcion de la siguiente manera:
Código:
#lista-galeria li:hover img, #lista-galeria li:hover a span {
display:block;
}
Pero esto muestra la imagen al colocar el mouse sobre la imagen pequeña, si quiero mostrar la imagen al click de la siguiente manera no pasa nada:
Código:
#lista-galeria li a:active img, #lista-galeria li a:active span {
display:block;
}
No es solo el valor "active" sino cualquiero (focus, hover), simplemente no funciona si manipulo el elemento <a>.
Que puede estar pasando? Gracias.