[SOLUCIONADO] Cortina semitransparente superpuesta a la web

[TinchoRz]

Hola!

Luego de intentar un tiempo no logro hacer algo que creo yo es simple pero no encuentro la respuesta de como hacerlo.

Tengo varias miniaturas de imagenes en mi web y lo que quiero es que al hacerles click, se superponga una "cortina" negra con una opacidad reducida tapando la totalidad de la pagina para arriba poner la imagen en tamaño completo.
Es algo bastante visto creo yo.

Estoy usando html CSS y jQuery (para hacer aparecer una lupa arriba de las imagenes al pasarle con el mouse)

Hasta ahora tengo esto:

HTML

Código:

<div id="cortina">
</div>

CSS

Código:

#cortina
{
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    z-index: 20;
}

que estoy haciendo mal? /:

Desde ya muchas gracias!

[pzin]

Los elementos html y body, ¿tienen una altura o altura mínima?

Código CSS:

html, body {
  min-height: 100%;
}
 

[TinchoRz]

no se como chequear lo que pusistes, pero bueno, agregue ese padacito de codigo al CSS y no hubo cambios, sigue sin verse /:
Saludos!

[pzin]

Aparte de eso del html y body, cambia tu #cortina a algo como esto:

Código CSS:

#cortina {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 20;
}
 

¿Cómo estás haciendo para mostrar ese elemento?

[TinchoRz]

Funciona! muchas gracias.

Cambie el .5 por un .7 porque era muy clarito, funciona de 10
Ahora tengo una pregunta, entendi el porque de todas las lineas pero no veo el porque ocupa toda la pantalla, si lo divs al crearlos vacios no ocupan espacio y no veo ninguna linea asignandole uno..
Es solo curiosidad para tener todo entendido jajaja

Saludos!

[pzin]

Es porque estás indicando que la distancia hacia arriba sea de cero, y la distancia de abajo sea cero también. Luego ocupará cero de arriba y de abajo, que es lo mismo que el 100%. Y lo de izquierda y derecha lo mismo.

A mi siempre me parece más limpio hacerlo así. Manías tal vez.

[TinchoRz]

ohhh claro, siempre pongo top y left para pegarlo al borde superior izquierdo, pero pase por alto que al poner bottom y right estas diciendo que esta pegado a todos los bordes jajaj no lo habia pensado...
Bueno, esto es todo por ahora, ahora a intentar lograr el efecto de la aparicion de la foto jajaj

Gracias por la ayuda!