Wordpress, TimThumb & jQuery: Image Hover Effect

This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

TimThumb.php
Get the Image script (includes a TimThumb.php in a package file)
jQuery
WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image() gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.