title: CSS image hover change color of text
body: <p>I'd like to be able to hover over an image and the text below the image change color.</p>
  
  <p>An example of what I mean can be seen on this site, by hovering over any of the products the text below changes to white: www.ugmonk.com</p>
  
  <p>This is the code for my list item:</p>
  
  <pre><code>&lt;li&gt;
              &lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark" title="&lt;?php printf(__('%s', 'wpzoom'), get_the_title()); ?&gt;"&gt;   
                  &lt;?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) &amp;&amp; has_post_thumbnail() ) {
                  $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID), '' );
                  $img = $thumbURL[0];  }
                  else  {
                      if (!$img) { $img = catch_that_image($post-&gt;ID);  }
                      }  
                  if ($img){ $img = wpzoom_wpmu($img); ?&gt;
                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/scripts/timthumb.php?src=&lt;?php echo $img ?&gt;&amp;amp;w=280&amp;amp;h=280&amp;amp;zc=1" alt="&lt;?php the_title(); ?&gt;"/&gt;&lt;?php } ?&gt;
                  &lt;/a&gt;
  
              &lt;div class="meta"&gt;
                  &lt;h3&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark" title="&lt;?php printf(__('%s', 'wpzoom'), get_the_title()); ?&gt;"&gt;  &lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
              &lt;?php
              $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
              $price = do_shortcode($price);
              ?&gt;
              &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php echo $price; ?&gt;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>I have tried opening the 'a' tag at the beginning and closing at the end like this:</p>
  
  <pre><code>&lt;li&gt;
  
              &lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark" title="&lt;?php printf(__('%s', 'wpzoom'), get_the_title()); ?&gt;"&gt;   
                  &lt;?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) &amp;&amp; has_post_thumbnail() ) {
                  $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID), '' );
                  $img = $thumbURL[0];  }
                  else  {
                      if (!$img) { $img = catch_that_image($post-&gt;ID);  }
                      }  
                  if ($img){ $img = wpzoom_wpmu($img); ?&gt;
                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/scripts/timthumb.php?src=&lt;?php echo $img ?&gt;&amp;amp;w=280&amp;amp;h=280&amp;amp;zc=1" alt="&lt;?php the_title(); ?&gt;"/&gt;&lt;?php } ?&gt;
  
  
              &lt;div class="meta"&gt;
                  &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
              &lt;?php
              $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
              $price = do_shortcode($price);
              echo $price; ?&gt;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>And then I have tried to style a:hover but can't get it working!</p>
  
  <p>Thanks</p>
  
  <p>*<strong><em>EDIT</em>*</strong></p>
  
  <p>HTML outputted:</p>
  
  <pre><code>&lt;li&gt;
      &lt;a href="http://www.domain.com/link" rel="bookmark" title="Description"&gt;   
          &lt;img src="http://domain.com/image" alt="Description"/&gt;
      &lt;/a&gt;
  
      &lt;div class="meta"&gt;
          &lt;h3&gt;
              &lt;a href="http://www.domain.com/link" rel="bookmark" title="Description"&gt;
                  Product
              &lt;/a&gt;
          &lt;/h3&gt;
          &lt;a href="http://www.domain.com/link"&gt;
              &lt;span class="Cart66Price"&gt;£15.00&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;           
  </code></pre>