Hyperlink not responding - html

Question

My landing page has a slideshow with text and links that direct the visitor to it's corresponding page.
Landing page link: http://karenrubkiewicz.com/martin/
The yellow arrow in the second box should be a clickable link, but it doesn't respond.
Here is my coding:
HTML
<div id="maximage">
<div>
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
<div>
<img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
ETC...
</div> <!--END MAXIMAGE DIV-->
CSS
#maximage {
/* position:fixed !important;*/
display:block;
}
.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2 a{
position: relative;
display:block;
}
I am using a maximage plugin, I am not sure whether that could be a possible cause of inference.
One more note, in my HTML, when I remove a certain div, the link begins to work, only then my slideshow falls apart.
EXAMPLE
<div id="maximage">
<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV
ETC...
</div> <!--END MAXIMAGE DIV-->
I'm really stuck on this one.
Thanks in advance!

Answer 1

Place this in CSS:
#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}
If it wont help, then this:
#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}

Answer 2

Looking at your codes on your site, (which btw look different from what you posted here), I think things get complicated when your in-slide-content and in-slide-content2 divs are enclosed in your mc-image with its background set to your image file (instead of using an img tag).
This is what your current codes look like:
<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
<div class="in-slide-content">PLACES</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
Try convert your mc-image to an image tag and extract your in-slide-content and in-slide-content2 out of your maximage.
I think this live demo on jsfiddle is very similar to what you are trying to do.
The reason why manipulating the z-index attribute (of the image, the anchor tag etc.) in your css script probably won't work is because the jquery.cycle.all.js script assigns all your images with some high value z-index on start-up so that they can stack on top of each other.
// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
As the script cycles through your images, some codes (I haven't figured out where yet) will reset the z-index of that image to z+1, so that current image will be stack on top of the rest. I tried setting the z-index of some of your HTML elements to some ridiculous high number but to no avail. Anyway, I still think the cleanest way to solve this is to look at the fiddle I shared.