WordPress finally introduced a Post Thumbnail feature in version 2.9 which has made life quite a bit easier for WordPress theme developers that love to integrate thumbnails into their themes. There are many different ways to dress up post thumbnail images, but for this tutorial we are going focus on a simple 5 minute technique using CSS. If you haven’t already integrated post thumbnails into your WordPress theme, there are several detailed tutorials out there that show you how do to so. Here are two in particular that you may want to read by Justin Tadlock and Matt Brett.

Create a Transparent Hover Image

Using my latest TV Elements theme as an example, I’m going to show you how I added the transparent hover image over the post thumbnails used throughout the theme. The TV Elements theme uses 200px wide by 150px high post thumbnail images which I pre-set within my theme options (as described within Matt Brett’s tutorial). So, the first thing we want to do is create a transparent PNG image that we can use to display over the post thumbnail.

For this example, the image you create should be exactly the same width as your thumbnails but twice the height so that we can create a simple “hover” state using CSS for each thumbnail. I have uploaded the source hover image file used for the TV Elements theme for your reference.

Some Very Simple CSS

It really is amazing how easy it is to create elegant eye-catching effects using just a few lines of CSS code. The first thing we want to do is create a container for our post thumbnails.

/** The Post Thumbnails Container **/
.post-thumbnail {
width: 200px;
height: 150px;
float: left;
margin: 0 20px 0 20px;
}

Next, lets add the CSS needed for the actual post thumbnail hover image.

.post-thumbnail-frame {
background: url(images/post-thumbnail-frame.png) 0 0;
width: 200px;
height: 150px;
position: absolute;
}

/** Show The Hover State **/
.post-thumbnail-frame:hover {
background: url(images/post-thumbnail-frame.png) 0 -150px;
}

Time for Theme Integration

Now the only thing left to do is to integrate all the above into your WordPress theme. This is much easier than you might think. For instance of you wanted to integrate this effect on your multi-post pages beside your post text, you would edit index.php and insert the following code right above the <?php the_content(' '); ?> tag.

<div class="post-thumbnail">
  <a class="post-thumbnail-frame" href="<?php the_permalink() ?>"
         title="<?php the_title_attribute(); ?>"></a>
  <?php the_post_thumbnail(); ?>
</div>

Go to Source