WordPress | Using imagehover on Featured Images

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' =&gt; 'Colored Image',
            'id' =&gt; 'colored-image',
            'post_type' =&gt; '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" />';

Couldn't you just use css? Like here for example: html5templatesdreamweaver.com/hover-effects.html — dingo_d
Hi, and thank you for your reply. I did have a look at options using CSS, however I thought it wouldn't work out that well, since I'm using different 'Featured Images'. They're all being called up by the use of one single code in the layouts-objects.php file (from what I can tell). Have a look at the bottom of my original post. I added the code in the layouts-objects.php file. The Featured Image-part: portfolio-featured-thumb-460. — Richard
From what I can see you have image in the .item-wrapper div, after the image is just empty .hover div and a span with a title. Here alessioatzeni.com/wp-content/tutorials/html-css/… they use another div under the image that will remove the opacity from the image (.fourth-effect .mask and border is used to cover the image). — dingo_d
I tried to figure out what you were saying, but I guess the info kind of blew me away ;) The image indeed is called from the item-wrapper div (['portfolio-featured-thumb-460']). What did you mean by it being just empty after the image? The 'no image image'-part? And finally: what should I be doing with the .hover div and span (with a title)? I did have a look at the url. Seems nice (if I'm able to use a second image instead of some opacity-percentage). Thanks! :) — Richard
By the way, I was trying to figure out this other option as well. In my original post, at EDIT 2, you can see my modified piece of code (the mid-section with the portfolio-featured-thumb-460). If there was a way to replace the URL TO HOVER IMAGE-part (not just by using a real url, but in the form of a code -like in the first part of that code), that would solve the case as well, right? Calling the (second, hover Featured) image from the Multiple Post Thumbnails-plugin. Hope that makes sense... ;) — Richard

dingo_d dingo_d · Accepted Answer · 2014-08-28T13:51:21

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.

WordPress | Using imagehover on Featured Images

1 Answers