A while back I worked on a site that required a hover effect where a black and white image faded into a color image. I wrote a tutorial called Creating a Mouseover Fade Effect with jQuery on the jQuery technique I used for the hover. That effect no longer requires jQuery since we can now use CSS3 transitions (see A Simple Fade with CSS3) but the real issue was with having to upload two separate images to get the effect to work, which required an image editing software like Photoshop. Thankfully, Otto just wrote a great article on a way that you can use some built in WordPress functions and a little PHP to automatically create a black and white thumbnail when you upload an image.

First we need to create a new thumbnail using add_image_size(). We’ll use the same thumbnail settings from the WordPress Media page in the wp-admin. Add this to your functions.php file within the PHP tags:

add_action('after_setup_theme','bw_images_size');
function bw_images_size() {
	$crop = get_option('thumbnail_crop')==1 ? true : false;
	add_image_size('thumbnail-bw', get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), $crop);
}

With that in place, we can now add the following function which will automatically create a black and white thumbnail:

add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {
	$file = wp_upload_dir();
	$file = trailingslashit($file['path']).$meta['sizes']['thumbnail-bw']['file'];
	list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
	$image = wp_load_image($file);
	imagefilter($image, IMG_FILTER_GRAYSCALE);
	//imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
	switch ($orig_type) {
		case IMAGETYPE_GIF:
			$file = str_replace(".gif", "-bw.gif", $file);
			imagegif( $image, $file );
			break;
		case IMAGETYPE_PNG:
			$file = str_replace(".png", "-bw.png", $file);
			imagepng( $image, $file );
			break;
		case IMAGETYPE_JPEG:
			$file = str_replace(".jpg", "-bw.jpg", $file);
			imagejpeg( $image, $file );
			break;
	}
	return $meta;
}

Whenever you upload an image, this function will create a new black and white thumbnail automatically. I also added a Gaussian Blur but commented it out. Remove those two slashes “//” to add a Gaussian Blur to your new black and white thumbnail. See other available filters.

Once you’ve added the above code, you can use get_post_thumbnail() within your WordPress loop to display the two images for the effect:

if(function_exists('has_post_thumbnail') && has_post_thumbnail()) { 
	echo '<a href="'.get_permalink().'" class="fade-image">';
	the_post_thumbnail('thumbnail-bw', array('class'=>'fade-image-a'));
	the_post_thumbnail('thumbnail', array('class'=>'fade-image-b'));
	echo '</a>';
}

This displays both images and surrounds them by an anchor tag. All we need is a little CSS3 to get our fade working:

.fade-image {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	}
	
	.fade-image-a,
	.fade-image b {
		position: absolute;
		left: 0;
		top: 0;
		}
		
	.fade-image-a {
		z-index: 5;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
   		}	
		
		.fade-image-a:hover {
			opacity: 0;
			}

The fade will only work in browsers that support CSS3 transitions but everything else should work on any server that supports the latest release of WordPress.