Display Post Titles on top of the_post_thumbnail()

Hey guys, first off, loving the roots theme. It’s amazing!

I’m working on an issue that’s just about solved, but I’m currently stuck. I’ve changed content php to change the way posts are displayed. I’ve ran $wp_query->current_post to determine what the post count is, and styled each one individually.

The first post (post count 0) has a bigger featured image and headline. The 2nd, 3rd, 4th and 5th posts have no excerpt – only a featured image, 250x250, in a group of four (like the boxes on this site: http://roispark.com)

I have this all working, however, I need to be able to put the post titles on top of these images. Since content.php generates each image by itself, 4 times, I can’t use relative/absolute positioning, or all the titles are stacked on top of each other.

Here’s my code:

  <header>
<?php if ( $wp_query->current_post == 0 && !is_paged() ) { ?>
  <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php get_template_part('templates/entry-meta'); ?>
  <?php if ( has_post_thumbnail() ) {
	    the_post_thumbnail('homepage-first-thumb');
    } ?>

<?php } elseif ( $wp_query->current_post == 1 
|| $wp_query->current_post == 2 
|| $wp_query->current_post == 3 
|| $wp_query->current_post == 4 
&& !is_paged() ) { ?>  

<div class="post-boxes">
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb'); ?></a>
</div>

<?php } else { ?>
  <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail('homepage-child');
  } ?>
  <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php get_template_part('templates/entry-meta'); ?>
<?php } ?>

Any ideas on how I can get the_title to show up on the images?

Use absolute positioning on the title and relative positioning on the parent (.post-boxes).

Also in future, please keep general CSS questions to Stack Overflow or one of its equivalents.