WordPress | Using imagehover on Featured Images - wordpress

Question

I'm not a a big pro-Pro, but I do know my way around in basic scripting/adjusting/editing and stuff when it comes to CMS. Right now, I'm using WordPress for my website. I modified a theme and all is running quite well (it's in construction mode).
However, there's one thing I've been trying to accomplish, but I can't get it to work.
WordPress has this feature called Featured Image. It's an image/thumbnail you can include to an article. What I'm trying to do here, is to turn that Featured Image into a imagehover. So when people move their mouse over the (black and white) image, it turns into another (colored) image.
One of the things I've been able to figure out, is using a WordPress pluging called Multiple Post Thumbnails. It lets you add 2 Featured Images (thumbnails) to a single article. In this case: a black and white image and a colored image.
Now here's the thing; there in fact can be found some sort of a tutorial on how to activate this modification, but I can't get it to work. URL: http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/
So my two questions:
Is there a better (easier) way to accomplish this imagehover?
As for the tutorial:
I used copy/paste on all code and added it to my own files/theme. All it gave me was a blanc page. I had to remove and adjust some code from the functions.php code (for instance the name of the theme) to get it to work at all (meaning: to be able to show my page at all):
Tutorial:
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
array(
'label' => 'Colored Image',
'id' => 'colored-image',
'post_type' => 'post'
)
);
}
Only shows up anything like this:
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
array(
'label' => 'Colored Image',
'id' => 'colored-image',
'post_type' => 'post'
)
);
}
Like I said, I can't get it to work. Adjusting this piece of code leaves me off where I started. Black and white images (Featured Image 1) only.
I'm using this Cosmox theme: http://cosmox.ozythemes.com/. I created a page with a couple of images/thumbnails (which are the Featured Images) of partners (faces) under each other. When you scroll over those images, a textbox with information is revealed. It's basically the same as the WHATS NEW section.
Hopefully there's a simple solution to this one ;)
Thanks so much!
#dingo_d:
foreach( $myposts as $post ) : the_post(); $more = 0;
echo '<li>';
echo ' <div class="item-wrapper">';
echo ' <div>';
if ( has_post_thumbnail() ):
$upload_dir = wp_upload_dir();
$custom = get_post_custom(); $custom = get_post_meta($custom["_thumbnail_id"][0]);
$custom = unserialize($custom['_wp_attachment_metadata'][0]); $upload_folder = dirname($custom['file']);
if(isset($custom['sizes']) && !empty($custom['sizes'])) {
echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%"/>';
}else{
echo '<img src="'. $upload_dir['baseurl'] . '/' . $custom["file"] . '" width="100%"/>';
}
else:
//no image image
echo '<img src="' . OZY_BASE_URL . 'images/no-image310x140.png" width="100%"/>';
endif;
echo ' <div class="hover"></div>';
echo ' </div>';
echo ' <span class="cfnt" align="center">';
the_title();
echo ' </span>';
echo ' </div>';
if($xml->description=='1') echo '<div class="desc"><span class="cfnt">' . get_the_title() . '</span><p>' . strip_tags(get_the_content('','')) . '</p></div>';
echo "</li>";
endforeach;
EDIT 2:
echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%" class="nohover" /><img alt="imagehover" src="URL TO HOVER IMAGE" class="hover" />';

Answer 1

From the code above your output should be something like this (in html)
<li>
<div class="item-wrapper">
<div>
<img src=""/>
<div class="hover"></div>
</div>
<span class="cfnt" align="center"></span>
</div>
<div class="desc"><span class="cfnt"></span><p></p></div>
</li>
Under the image there is an empty div with the class hover that you can use in conjuncture with this effect, to make your image first be black, and then be revealed on hover.