z-index issue on iPad/iPhone - iphone

Question

first of all I have very little experience with CSS/HTML, I'm not a webdesigner/coder, basically I have no clue what I'm doing.
I'm also close to kill myself because nothing helped. I really appreciate everyone who's trying to help me.
When you go on pawelpietryka.com and hover on the image it slides in a div via webkit transition and basically everything works.
I'm also using a webkit inset shadow which is animated too. I had big issues with this shadow because it always appeared behind the image (not in front) ... I hacked it with these changes
#demo-5 img { z-index: -1; position: relative; vertical-align: top; }
As soon as I put the z-index: -1; in it doesn't work on iPad/iPhone anymore, I'm tapping on the container and nothing happens.
(I'm assuming it doesn't have a hover state and when I'm trying to tap it it's somehow BEHIND the main layer.)
I've seen this on other page and the ideal scenario would be: 1) First tap box slides in 2) Second tap jump to destination.
Thanks!

Answer 1

If you think of your div nesting as a pyramid such as...
<pyramid>
<section level="1">
<section level="2">
</section>
</section>
</pyramid>
You can't get level 2 to appear under level 1, because level 1 contains level 2. If you would want level 2 to appear over level 2, usually they would be siblings, i.e
<pyramid>
<section level="1"></section>
<section level="2"></section>
</pyramid>
But in your specific case, I would recommend putting the image as the background of the div
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>">
<div class="rel" id="demo-5" style="background: transparent url(<?php the_post_thumbnail('homepage-thumb'); ?>) top left no-repeat">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>

Answer 2

Trying to post it here, the formatting is odd on comments
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>"><div class="rel" id="demo-5" style="background-image:<?php the_post_thumbnail('homepage-thumb'); ?>">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
<?php endif ?>
</div></a>
</div>
<?php endwhile; ?>
</div>

Answer 3

And this is the code 'unchanged'
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<div class="rel" id="demo-5">
<?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?>
<?php if ($imbalance2_theme_options['images_only'] == 0): ?>
<a href="<?php the_permalink(); ?>"><div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div></a>
<?php endif ?>
</div>
</div>