the_title() is not displaying over the_thumbnail

Question

With the static html/css title that i have inside h1, is displaying over image, but when i use the_post_thumbnail(); with the_title();. Title moves above the image

What may be the issue?

<div class="col-sm-6 col-md-4 padding-fixation">
        <?php $portfolio_home = new WP_Query('cat=1'); ?>
        <?php while($portfolio_home->have_posts()) : $portfolio_home->the_post(); ?>
        <div class="image-portfolio" data-section="office">
        <div class="img-block">
                <img class="img-responsive" src="<?php the_post_thumbnail(); ?>" alt="">
        </div>
       <div class="overlay-header">
            <h1><?php the_title(); ?></h1>
        </div>
        <div class="text-overlay">
            <p><?php the_content(); ?></p>
        </div>
        </div>
    <?php endwhile; ?> 
    </div>

Answer 1

the_post_thumbnail() and get_the_post_thumbnail() will output the complete HTML for displaying that image. So this

<img class="img-responsive" src="<?php the_post_thumbnail(); ?>" alt="">

will be rendered to something like this

<img class="img-responsive" src="<img src="..." alt=".." class="..">" alt="">

which is not valid HTML and you can't really tell how browsers will display this.

Now you have 2 choices: Use this function as it is intended, or get the thumbnail URL via wp_get_attachment_thumb_url() and display it in your custom way.

<div class="img-block">
  Option 1
  <?php the_post_thumbnail(null, 'post-thumbnail', array('class' => 'img-responsive')); ?>

  Option 2
  <?php
  $url = wp_get_attachment_thumb_url( get_post_thumbnail_id() );
  ?>
  <img class="img-responsive" src="<?php echo $url; ?>" alt="">
</div>

As you can see, it is no problem to add additional classes even when using the_post_thumbnail(). Both options are valid ways, though option 1 is usually preferred within WordPress developers, because you'll get the default HTML markup for images, that everyone is used to and expecting.