menu desplegable se esconde detras de imagenes
Publicado por juan (3 intervenciones) el 19/11/2020 22:16:17
ya tengo varios dias intentando arreglar este error, pero parece ser que no funciona nada de lo que hago :(
codigo HTML
codigo CSS
codigo 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<main class="main-slider">
<div class="titulo">
<h1 >La Mejor Imagen & Sonido A Tu Alcance</h1>
</div>
<hr class="tit">
<div class="container-all">
<input type="radio" id="1" name="image-slide" hidden/>
<input type="radio" id="2" name="image-slide" hidden/>
<input type="radio" id="3" name="image-slide" hidden/>
<input type="radio" id="4" name="image-slide" hidden/>
<input type="radio" id="5" name="image-slide" hidden/>
<div class="slide">
<div class="imagen-select">
<img src="fotos2/1-10.jpg">
</div>
<div class="imagen-select">
<img src="fotos2/1-1.jpg">
</div>
<div class="imagen-select">
<img src="fotos2/1-2.jpg"><!--party-3-->
</div>
<div class="imagen-select">
<img src="fotos2/1-3.jpg">
</div>
<div class="imagen-select">
<img src="fotos2/1-8.jpg">
</div>
</div>
<div class="BOTON-SELECT"><!--pagination-->
<label class="boton-item" for="1"><!--item-pagination-->
</label>
<label class="boton-item" for="2">
</label>
<label class="boton-item" for="3">
</label>
<label class="boton-item" for="4">
</label>
<label class="boton-item" for="5">
</label>
</div>
codigo 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
.main-slider .container-all .slide img{
max-width: 120%;
width: 100%;
max-height:550px; /*ajustar imagenes a 500 px de altura*/
opacity: .9;
margin: -15px auto;/*ajuste de imagen para añadir las letras*/
}.main-slider{
width: 110%;
max-width: 1240px;/*estaba en 1200px*/
margin: 5px auto 10px auto;/*estaba en 10px al principio*/
background: #2C2220;
padding: 10px;/*estaba en 15*/
box-shadow: 0px 2px 5px rgba(0,0,0,0,75);
}.main-slider .container-all{
position: relative;max-width: 1200px;
max-height: 550px;/*no estaba decidir*/
width: 100%;
border-radius: 6px;
overflow:hidden;}.slide{
display: flex;transform: translate3d(0, 0, 0);
transition: all 600ms;animation-name: autoplay;
animation-duration: 10s;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}.imagen-select{
position: relative; display: flex;flex-direction:column;
flex-shrink: 0;
flex-grow: 0;
max-width: 100%;
}.BOTON-SELECT{
position: absolute; bottom: 20px; left: 0; display: flex;flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
}.boton-item{
display: flex;flex-direction: column;
align-items: center;
border: 2px solid white; width: 16px; height: 16px;border-radius: 1rem;
overflow: hidden; cursor: pointer;background: rgba(255, 255, 255, 0.5);
margin: 0 10px;text-align: center;
transition: all 300ms;}Valora esta pregunta
0
