Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » PROBLEMA CON CSS z-index

PHP - PROBLEMA CON CSS z-index

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 24 puestos en PHP (en relación al último mes)
Gráfica de PHP

PROBLEMA CON CSS z-index

Publicado por laura (22 intervenciones) el 26/08/2015 23:10:08
Hola a todos, mi problema esta en que tengo una Imagen en mi web la cual tiene un efefcto css, cuando pongo el z-index-1 al div, ya no hace el efecto


Me podrían ayudar por favor se los agradecería mucho.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de xve
Val: 3.943
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

PROBLEMA CON CSS z-index

Publicado por xve (6935 intervenciones) el 27/08/2015 07:41:24
nos puedes mostrar el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 24 puestos en PHP (en relación al último mes)
Gráfica de PHP

PROBLEMA CON CSS z-index

Publicado por laura (22 intervenciones) el 27/08/2015 16:52:43
hola xve gracias por contestar este es mi código

//////////////HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section id="mia">
 
 <div class="section1" id="mia">	<div id="casos" class="font">
		<div class="container">
	   <div class="title-section">
        <div class="zoom">
				<h1>CASOS DE EXITO</h1></div>
    </div>
 
<div id="caja30">
  <div id="caja10">
 
<div class="contenedor-img ejemplo-1">
     <img src="fotdp/_MG_9050.jpg" class="mediana"/>
     <div class="mascara">
         <h2>Maricruz Tepetzi Martinez</h2>
         <p>Maricruz grandes.</p>
        <div id="column-right"><a href="#" id="open1" class="link">click aqui</a></div>
     </div>
</div> </div>
<div id="popup1" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close1"><img src="images/close.png"/></a></div>
       <div><img src="../pagina_construccon_AVAN/imagenes/1.jpg" height="450" width="500" border="0"><h2>Maricruz</h2> </div>
    </div>
</div>
  </div>
</div>
 
</div>
</section>



y el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
#container {

width: 300px;
margin: 0 auto;
 
 
}
.title-section{
	 padding-top:6%;
 text-align:center;
 width: 80%;
 margin:0 auto;
 }
 
#caja30{

float:left;
width: 94%;
height: 900px;
border-style: solid; border-width:
border: 3px;
text-align:left;
margin-left:4em;
margin-top:4em;
text-align:justify;
 
}
 
#caja10{

float:left;
 
width: 260px;
height: 260px;
border-style: solid; border-width:
 
text-align:justify;
margin-left:2.5em;
margin-top:1em;
 
}
 
.contenedor-img {
	position:relative;
	width: 260px;
	height: 260px;
	float: left;
	overflow: hidden;
	text-align: center;
	cursor: default;
	background: #fff;

 
 
}
    .contenedor-img .mascara,.contenedor-img .contenido {
        width: 260px;
        height: 260px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0
 
    }
    .contenedor-img img {
        display: block;
        position: relative;
 
    }
    .contenedor-img h2 {
 
        text-transform: uppercase;
        color: #fff;

        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.9);
        margin: 20px 0 0 0
    }
    .contenedor-img p {
        font-size: 12px;
        position: relative;
        color: #fff;

        padding: 10px 20px 10px;
        text-align: center
    }
    .contenedor-img a.link {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        background: #222;

        color: #fff;

        text-transform: uppercase;
        box-shadow: 0 0 1px #000

    }
        .contenedor-img a.link:hover {
            box-shadow: 0 0 5px #000

        }
 
     .ejemplo-1 img {
    transition: all 0.2s linear;
 
}
.ejemplo-1 .mascara {
    opacity: 0;
    background-color: rgba(4,84,145, 0.7);
    transition: all 0.3s ease-in-out;
}
    .ejemplo-1 h2 {
        transform: translateX(-200px);
        opacity: 0;
        transition: all 0.7s ease-in-out;
    }
    .ejemplo-1 p {
        transform: translateX(200px);
        opacity: 0;
    	transition: all 0.4s linear;
    }
    .ejemplo-1 a.link{
        opacity: 0;
    	transition: all 0.4s ease-in-out;
        transform: translateY(100px)
    }
    .ejemplo-1:hover img {
    	transform: scale(1.1);
    }
    .ejemplo-1:hover .mascara {
    	opacity: 1;
    }
    .ejemplo-1:hover h2,
    .ejemplo-1:hover p,
    .ejemplo-1:hover a.link {
        opacity: 1;
        transform: translateX(0px);
    }
    .ejemplo-1:hover p {
        transition-delay: 0.1s;
    }
    .ejemplo-1:hover a.link {
        transition-delay: 0.2s;
        transform: translateY(0px);
    }


////////// y el js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
$('#open1').click(function(){
		$('#popup1').fadeIn('slow');
 
		$('.popup-overlay').fadeIn('slow');
		$('.popup-overlay').height($(window).height());
		return false;
	});
	;
 
	$('#close1').click(function(){
		$('#popup1').fadeOut('slow');
		return false;
 
	});
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.943
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

PROBLEMA CON CSS z-index

Publicado por xve (6935 intervenciones) el 27/08/2015 22:22:57
Hola Laura, no veo ningun z-index en tu código.... a que imagen haces referencia de las dos?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 24 puestos en PHP (en relación al último mes)
Gráfica de PHP

PROBLEMA CON CSS z-index

Publicado por laura (22 intervenciones) el 28/08/2015 18:59:24
al del div contenedor-img ejemplo-1, si en las css le coloco el z-index-1 la imagen deja de realizar el efecto. lo que pasa que tengo un menu fixed y cuando este llega a la imagen se pierde el menu entonces si posiciono los divs atrás con z-index-1 la imagen que tengo con efecto ya no realiza nada y se queda estatica y el menu si se ve bien
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar