title: WordPress | Using imagehover on Featured Images
body: <p>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).</p>
  
  <p>However, there's one thing I've been trying to accomplish, but I can't get it to work.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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: <a href="http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/" rel="nofollow">http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/</a></p>
  
  <p>So my two questions:</p>
  
  <ol>
  <li>Is there a better (easier) way to accomplish this imagehover?</li>
  <li>As for the tutorial:</li>
  </ol>
  
  <p>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):</p>
  
  <p>Tutorial:</p>
  
  <pre><code>if (class_exists('MultiPostThumbnails')) {
      new MultiPostThumbnails(
          array(
              'label' =&amp;gt; 'Colored Image',
              'id' =&amp;gt; 'colored-image',
              'post_type' =&amp;gt; 'post'
          )
      );
  }
  </code></pre>
  
  <p>Only shows up anything like this:</p>
  
  <pre><code>if (class_exists('MultiPostThumbnails')) {
  new MultiPostThumbnails(
      array(
          'label' =&gt; 'Colored Image',
          'id' =&gt; 'colored-image',
          'post_type' =&gt; 'post'
      )
  );
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm using this Cosmox theme: <a href="http://cosmox.ozythemes.com/" rel="nofollow">http://cosmox.ozythemes.com/</a>. 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.</p>
  
  <p>Hopefully there's a simple solution to this one ;)</p>
  
  <p>Thanks so much!</p>
  
  <p>@dingo_d:</p>
  
  <pre><code>foreach( $myposts as $post ) :  the_post(); $more = 0; 
          echo '&lt;li&gt;';
          echo '  &lt;div class="item-wrapper"&gt;';
          echo '      &lt;div&gt;';
          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']) &amp;&amp; !empty($custom['sizes'])) {
                  echo '&lt;img src="'.  $upload_dir['baseurl'] . '/' . $upload_folder . '/' .  $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%"/&gt;';       
              }else{
                  echo '&lt;img src="'.  $upload_dir['baseurl'] . '/' . $custom["file"] . '" width="100%"/&gt;';        
              }
          else:
              //no image image
              echo '&lt;img src="' . OZY_BASE_URL . 'images/no-image310x140.png" width="100%"/&gt;';
          endif;
          echo '          &lt;div class="hover"&gt;&lt;/div&gt;';
          echo '      &lt;/div&gt;';
          echo '      &lt;span class="cfnt" align="center"&gt;';
                          the_title();
          echo '      &lt;/span&gt;';
          echo '  &lt;/div&gt;';
          if($xml-&gt;description=='1') echo '&lt;div class="desc"&gt;&lt;span class="cfnt"&gt;' . get_the_title() . '&lt;/span&gt;&lt;p&gt;' . strip_tags(get_the_content('','')) . '&lt;/p&gt;&lt;/div&gt;';
          echo "&lt;/li&gt;";
      endforeach;
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <pre><code>echo '&lt;img src="'.  $upload_dir['baseurl'] . '/' . $upload_folder . '/' .  $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%" class="nohover" /&gt;&lt;img alt="imagehover" src="URL TO HOVER IMAGE" class="hover" /&gt;';
  </code></pre>