Copyright © 2010 Web Design and Hosting Tips. All Rights Reserved. Snowblind by Themes by bavotasan.com. Powered by WordPress.
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.
Create a Transparent Hover Image
How to add the transparent hover image over the post thumbnails, use 200px wide by 150px high post thumbnail images which pre-set within theme options. 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.
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.
/** For The 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>
Source : Woorkup.comRelated posts:
March 8, 2010 at 12:27 AM
This blog is great. How did you come up witht he idea? 9 5 9
March 8, 2010 at 8:47 AM
I like the layout of your blog and I’m going to do the same thing for mine. Do you have any tips? Please PM ME on yahoo @ AmandaLovesYou702 8 2 4
March 8, 2010 at 12:07 PM
@Martin: browse Google, there is plenty theme for WP. I found the good one yesterday with magazine layout called : Producer. Really simple for one who don’t know much about CSS or programming.
March 8, 2010 at 1:08 PM
I need some advice for my blog….I like your layout. Can you help me? 2 7 2
March 16, 2010 at 3:50 AM
While this topic can be very challenging for most people, my opinion is that there has to be a middle or common ground that we all can find. I do appreciate that you’ve added relevant and rational commentary here though. Very much thanks to you!
March 17, 2010 at 12:37 PM
@Shan: Yeah, right. This topic is really interesting & honestly you can see the more resources at the end of the post.