How to display post title inside thumbnail?

Question

I am trying to display the posts with their featured image. On the top of the featured image I would like to put the title of the post in the following way:

So far I am doing the following:

<article>

    <?php // Display blog posts on any page @ https://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query('posts_per_page=5' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail( 'full' );
    }
   ?>

    <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>

    <?php endwhile; ?>

    <?php if ($paged > 1) { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
        <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
    </nav>

    <?php } else { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
    </nav>

    <?php } ?>

    <?php wp_reset_postdata(); ?>

I am printing the posts, titles and featured images. I can style them like on the picture, but how to put the title on the top of the image?

Answer 1

Think this should do it... (there are hundreds of ways to achieve this)

<?php // Display blog posts on any page @ https://m0n.co/l
   $temp = $wp_query; $wp_query= null;
   $wp_query = new WP_Query(); $wp_query->query('posts_per_page=5' . '&paged='.$paged);
   while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
   <?php
   if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.?>
     <div class="post-item" style="background-image: url('<?php echo the_post_thumbnail( 'full' ); ?>')">
       <div class="heading-inner">
         <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
       </div>
     </dvi>

   }
  ?>


   <?php the_excerpt(); ?>

   <?php endwhile; ?>

   <?php if ($paged > 1) { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
       <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
   </nav>

   <?php } else { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
   </nav>

   <?php } ?>

   <?php wp_reset_postdata(); ?>

   <style>
    .post-item {
      position: relative;
      background-repeat: no-repeat;
      background-size:cover;
      background-position: 50% 50%;
      height: 200px;
      width: 200px;
    }
    .heading-inner {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

   </style>