overlay post title over post's featured image

Question

I'm using the Twenty Seventeen Wordpress Theme. I'm trying to do something similar to the below image for the static front page:

Currently, this is an image of what I have on my site:

The post title is currently on the bottom of the image. I would like it to be on the image as seen in the above image.

Right now in my code, I have the default code from Twenty Seventeen theme's content-front-page.php populating the the post thread. Below:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

<?php if ( has_post_thumbnail() ) :
    $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

    $post_thumbnail_id = get_post_thumbnail_id( $post->ID );

    $thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

    // Calculate aspect ratio: h / w * 100%.
    $ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
    ?>

    <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
        <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>

    </div><!-- .panel-image -->

<?php endif; ?>

<div class="panel-content">
    <div class="wrap">

        <div class="entry-content">
            <?php
                /* translators: %s: Name of current post */
                the_content( sprintf(
                    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
                    get_the_title()
                ) );
            ?>
        </div><!-- .entry-content -->

    </div><!-- .wrap -->
</div><!-- .panel-content -->

</article><!-- #post-## -->

My additional code is below. What I'm trying to achieve right now is to pull 3 recent posts with the post title placed over the post's featured image. I haven't completed the CSS, that's something I'll work on by myself after I can call those 3 posts to the page.

<div class="row featured-posts-box">
  <ul class="top-featured-image">
<?php
    $recentPosts = new WP_Query(array('posts_per_page'=>'3',));
    while($recentPosts->have_posts()): $query->the_post(); 
?>
<li class="post-thumbnail">
        <span><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?><?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
        </a></span>
    </li><!-- .post-thumbnail -->
<?php
endwhile;
?>
</ul>

The code above keeps breaking my site. I think it's the while loop, but I'm not sure.

I don't want to use a plugin. I actually want to learn how to develop a wordpress theme.

Answer 1

Here is the answer for you CSS issue. yes you can achieve that layout using CSS. Just follow this structure:

<div class="parent">
  <div class="image"><img src=""/></div>
  <div class = "overlay"> Add you title here </div>
</div>

here .parent must me position:relative and .overlay must be position:absolute with 100%width and bottom:0 . you can play around with style.