CSS image hover change color of text

Question

I'd like to be able to hover over an image and the text below the image change color.

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

This is the code for my list item:

<li>
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">   
                <?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
                $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
                $img = $thumbURL[0];  }
                else  {
                    if (!$img) { $img = catch_that_image($post->ID);  }
                    }  
                if ($img){ $img = wpzoom_wpmu($img); ?>
                <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;w=280&amp;h=280&amp;zc=1" alt="<?php the_title(); ?>"/><?php } ?>
                </a>

            <div class="meta">
                <h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">  <?php the_title(); ?></a></h3>
            <?php
            $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
            $price = do_shortcode($price);
            ?>
            <a href="<?php the_permalink(); ?>"><?php echo $price; ?></a>

            </div>
        </li>

I have tried opening the 'a' tag at the beginning and closing at the end like this:

<li>

            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">   
                <?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
                $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
                $img = $thumbURL[0];  }
                else  {
                    if (!$img) { $img = catch_that_image($post->ID);  }
                    }  
                if ($img){ $img = wpzoom_wpmu($img); ?>
                <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;w=280&amp;h=280&amp;zc=1" alt="<?php the_title(); ?>"/><?php } ?>


            <div class="meta">
                <h3><?php the_title(); ?></h3>
            <?php
            $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
            $price = do_shortcode($price);
            echo $price; ?></a>

            </div>
        </li>

And then I have tried to style a:hover but can't get it working!

Thanks

*EDIT*

HTML outputted:

<li>
    <a href="http://www.domain.com/link" rel="bookmark" title="Description">   
        <img src="http://domain.com/image" alt="Description"/>
    </a>

    <div class="meta">
        <h3>
            <a href="http://www.domain.com/link" rel="bookmark" title="Description">
                Product
            </a>
        </h3>
        <a href="http://www.domain.com/link">
            <span class="Cart66Price">£15.00</span>
        </a>
    </div>
</li>

My Head Hurts · Accepted Answer · 2012-01-23T12:48:16.187

1

It is hard to see the direct path to the text you want to highlight when you are just showing your PHP code rather than the generated HTML. However using the first code example you provided, you could try the following selector:

a[rel="bookmark"]:hover + .meta * {
    color: #fff;
}

Edit

Sorry, I have removed the > selector as this would not have targeted the anchor tag inside of the h3 element. You may have to include more information, such as CSS if this is not working as it works for me using your code above.

Working example: http://jsfiddle.net/eqfQb/

edited Jan 23 '12 at 12:48

answered Jan 23 '12 at 12:16

My Head Hurts

37,315
16
75
117

I've added the HTML above. Basically, when I rollover the image I want everything in 'meta' to change colour. I tried your solution but it doesn't seem to have an effect :( – Jambo Jan 23 '12 at 12:38
Haha thanks so much! If I remove the
tags from the text above the price then your solution works, there must have been a conflict. I'll use your method and try to sort something out, thanks!!
– Jambo Jan 23 '12 at 13:36
@Jambo No problem. If you want to keep your `h3` tag you could add the `important` property to colour; `color: #fff !important` – My Head Hurts Jan 23 '12 at 15:11

score 0 · Answer 2 · answered Jan 23 '12 at 11:56

0

You should use jquery .hover() method.

$("#myImg").hover(function(){
    $('#myText').css('color','any color code');

 });

answered Jan 23 '12 at 11:56

Awais Qarni

17,492
24
75
137

sidneydobber · Answer 3 · 2012-01-23T13:03:13.067

0

This can also be a nice case for CSS3 which allows an anchor element to contain other elements. You don't need jQuery for this! Maybe to make it work in older browsers but since it is a progressive enhancement.

edited Jan 23 '12 at 13:03

answered Jan 23 '12 at 12:01

sidneydobber

2,790
1
23
32

It seems to me like with the site I mentioned they are just styling the 'a' tag that is within a div. I thought I would be able to do this too but it doesn't seem to have an effect at all. – Jambo Jan 23 '12 at 12:06
I'm at work this moment so I can't spend anymore time, in four hours i'll be home and I can post some code if you like. – sidneydobber Jan 23 '12 at 12:47
Really appreciate it dude, 'My Head Hurts' posted a solution which works though. Thanks! :) – Jambo Jan 23 '12 at 13:37

CSS image hover change color of text

3 Answers3

tags from the text above the price then your solution works, there must have been a conflict. I'll use your method and try to sort something out, thanks!!

Linked