WordPress: use a post title as a thumbnail overlay

We can easily create the effect of post titles used as overlays over post thumbnails by combining a little WordPress coding and some CSS techniques. Let's see the details.

In the single.php you can insert the following code, where the thumbnail dimensions are purely indicative:

<div class="post-thumb-title">
 <?php the_post_thumbnail(array(500,470));?>
 <p class="thumb-title"><?php the_title(); ?></p>
</div>
<?php the_content(); ?>

Then add the following CSS styles to your main theme style sheet:

/*= Post thumb with title */

div.post-thumb-title {
 width: 500px;
 margin: 1em auto;
}

div.post-thumb-title img {
 display: block;
 min-width: 100%;
}

div.post-thumb-title p.thumb-title {
 margin: 0;
 height: 2em;
 line-height: 2;
 position: relative;
 top: -2em;
 max-width: 100%;
 text-align: center;
 color: #fff;
 background: rgba(0, 0, 0, 0.7);
}

By adjusting minimum and maximum widths with CSS, we can get the following result: