WordPress | Using imagehover on Featured Images

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:

1. Is there a better (easier) way to accomplish this imagehover?
2. 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" />';