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>