Muy buenas a todos!
Tengo un slideshare que pasa progresivamente las fotografías.
Dentro de cada foto, he añadido un enlace hacia su respectivo contenido, el problema está en que durante el estado "visibility:hidden" las fotografías se me superponen al enlace en sí mismo impidiendo que este se active.
¿Cómo podría conseguir que este div se superponga siempre?
Este es mi código.
Código HTML:
<div id="slideshow">
<div class="img" id="img-0" style="z-index:0;">
<img src="slide/img/img01.jpg" width="550" height="350" />
<div class="text_link">
<a href="#">DESCARGAR DISCO</a>
<p>Descarga gratis Torsión Mudial</p>
</div>
</div>
<div class="img" id="img-1" style="z-index:10;">
<img src="slide/img/img02.jpg" width="550" height="350" />
<div class="text_link">
<a href="#">DESCARGAR DISCO</a>
<p>Descarga gratis Torsión Mudial</p>
</div>
</div>
<div class="img" id="img-2" style="z-index:20;">
<img src="slide/img/img03.jpg" width="550" height="350" />
<div class="text_link">
<a href="#">DESCARGAR DISCO</a>
<p>Descarga gratis Torsión Mudial</p>
</div>
</div>
<div class="img" id="img-3" style="z-index:30;">
<img src="slide/img/img04.jpg" width="550" height="350" />
<div class="text_link">
<a href="#">DESCARGAR DISCO</a>
<p>Descarga gratis Torsión Mudial</p>
</div>
</div>
<div class="img" id="img-4" style="z-index:40;">
<img src="slide/img/img05.jpg" width="550" height="350" />
<div class="text_link">
<a href="#">DESCARGAR DISCO</a>
<p>Descarga gratis Torsión Mudial</p>
</div>
</div>
<div id="rapidlinks-btns">
<div class="rapidlink-selected" id="rapidlink-0">
<a href="javascript:userChangeRapidLink('0');">
<img height="15" src="slide/gui/blank.png" width="15" />
</a>
</div>
<div class="rapidlink" id="rapidlink-1">
<a href="javascript:userChangeRapidLink('1');">
<img height="15" src="slide/gui/blank.png" width="15" />
</a>
</div>
<div class="rapidlink" id="rapidlink-2">
<a href="javascript:userChangeRapidLink('2');">
<img height="15" src="slide/gui/blank.png" width="15" />
</a>
</div>
<div class="rapidlink" id="rapidlink-3">
<a href="javascript:userChangeRapidLink('3');">
<img height="15" src="slide/gui/blank.png" width="15" />
</a>
</div>
<div class="rapidlink" id="rapidlink-4">
<a href="javascript:userChangeRapidLink('4');">
<img height="15" src="slide/gui/blank.png" width="15" />
</a>
</div>
</div>
</div>
aquí el css
Código HTML:
#slideshow {
width:550px;
height:350px;
margin:0 auto 0 auto;
position:relative;
overflow:hidden;
top:0px;
left:0px;
}
#slideshow .img {
width:100%;
height:100%;
position:absolute;
visibility:hidden;
top:0px;
left:0px;
float:right;
}
#slideshow #rapidlinks-btns {
width:150px;
height:15px;
left:420px;
top:320px;
position:absolute;
z-index:60;
float:right;
}
#slideshow #rapidlinks-btns .rapidlink,
#slideshow #rapidlinks-btns .rapidlink-selected {
width:15px;
height:15px;
float:left;
margin-right:5px;
}
#slideshow #rapidlinks-btns .rapidlink:hover,
#slideshow #rapidlinks-btns .rapidlink-selected {
background-image:url(../gui/blank2.png);width:15px; height:15px;
background-repeat:no-repeat;
}
#rapidlinks-btns .rapidlink a,
#rapidlinks-btns .rapidlink-selected a,
#rapidlinks-btns .rapidlink a img,
#rapidlinks-btns .rapidlink-selected a img {
text-decoration:none;
border:none;
}
/*-----------------------------------*/
/*----- ENLACE POR PÁGINA -----------*/
.text_link{
width:550px;
height:75px;
background-color:;
text-align:center;
float:left;
position:absolute;
top:220px;
left:-2px;
float:right;
border:dashed 2px #FFFFFF;
}
.text_link a{
font-family:'Roboto Condensed', sans-serif;
font-weight:600;
font-size:2em;
text-decoration:none;
color:#FFF;
}
.text_link a:hover{
text-decoration:underline;
}
.text_link p{
font-family:'Roboto Condensed', sans-serif;
font-size:1.5em;
margin-top:-5px;
color:#FFF;
}
Gracias de antemano