Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Cortina semitransparente superpuesta a la web

Estas en el tema de Cortina semitransparente superpuesta a la web en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/07/2013, 16:22
 
Fecha de Ingreso: marzo-2013
Mensajes: 6
Antigüedad: 8 años, 1 mes
Puntos: 0
Cortina semitransparente superpuesta a la web

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!
  #2 (permalink)  
Antiguo 11/07/2013, 16:35
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Cortina semitransparente superpuesta a la web

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

Código CSS:
Ver original
  1. html, body {
  2.   min-height: 100%;
  3. }
  #3 (permalink)  
Antiguo 11/07/2013, 16:55
 
Fecha de Ingreso: marzo-2013
Mensajes: 6
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Cortina semitransparente superpuesta a la web

no se como chequear lo que pusistes, pero bueno, agregue ese padacito de codigo al CSS y no hubo cambios, sigue sin verse /:
Saludos!
  #4 (permalink)  
Antiguo 11/07/2013, 17:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Cortina semitransparente superpuesta a la web

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

Código CSS:
Ver original
  1. #cortina {
  2.   position: fixed;
  3.   top: 0;
  4.   right: 0;
  5.   bottom: 0;
  6.   left: 0;
  7.   background-color: rgba(0,0,0,.5);
  8.   z-index: 20;
  9. }

¿Cómo estás haciendo para mostrar ese elemento?
  #5 (permalink)  
Antiguo 11/07/2013, 17:07
 
Fecha de Ingreso: marzo-2013
Mensajes: 6
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Cortina semitransparente superpuesta a la web

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!
  #6 (permalink)  
Antiguo 11/07/2013, 17:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 9 meses
Puntos: 2113
Respuesta: Cortina semitransparente superpuesta a la web

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.
  #7 (permalink)  
Antiguo 11/07/2013, 17:24
 
Fecha de Ingreso: marzo-2013
Mensajes: 6
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Cortina semitransparente superpuesta a la web

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!

Etiquetas: css, galeria, html, imagenes, zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:41.