Image rollover to change a text & padding color?

HTML & CSS
1

Hi, I am looking for a little CSS help.

My site has a bunch of “badges,” each of which contains an image with some borders & padding and a line of text underneath:

When the user rolls over the image, I would like to be able to change both the color of the padding (the 8 pixel dark gray border around the image), and the color of the text underneath the image.

If possible, I’d also like to make the rollover area the entire badge, not just the image, so that I don’t need to use duplicate links for the image and the text underneath it.

Is this possible with my current HTML/CSS code?

Much thanks in advance for any help.

DS

2

Hi,

I’d do something like this:


<ul id="badges">
    <li><a href="http://vimeo.com/moogaloop.swf?clip_id=11601730&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" width="800" height="450" rel="lightbox" tag="SWF" title="// FACEBOOK APP/ MICROSITE DEMO VIDEO"><img src="http://www.motionphi.com/images/spritespark3.jpg" width="240" height="100"  /> <span>sprite //<b>spark music mixer</b></span></a> </li>
    <li><a href="http://vimeo.com/moogaloop.swf?clip_id=11601730&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" width="800" height="450" rel="lightbox" tag="SWF" title="// FACEBOOK APP/ MICROSITE DEMO VIDEO"><img src="http://www.motionphi.com/images/spritespark3.jpg" width="240" height="100"  /> <span>sprite //<b>spark music mixer</b></span></a> </li>
    <li><a href="http://vimeo.com/moogaloop.swf?clip_id=11601730&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" width="800" height="450" rel="lightbox" tag="SWF" title="// FACEBOOK APP/ MICROSITE DEMO VIDEO"><img src="http://www.motionphi.com/images/spritespark3.jpg" width="240" height="100"  /> <span>sprite //<b>spark music mixer</b></span></a> </li>
</ul>



ul#badges {
    margin:0;
    list-style:none;
    margin:0;
    padding:0;
    width:100&#37;;
    overflow:hidden;
    font-family: Helvetica, Geneva, sans-serif;
}
#badges li {
    float: left;
    width:272px;
    margin:0 7px 13px;
    display:inline;
    position: relative;
    text-align: left;
    text-transform: uppercase;
    line-height:1.1;
}
#badges li a {
    padding: 8px 8px 8px 8px;
    background: #c0c0c0;
    border: 1px solid #999999;
    width: 254px;
    height:129px;
    overflow:hidden;
    float: left;
    letter-spacing:.1em;
    font-size: 10px;
}
#badges li span {
    color: #666666;
    display:block;
    margin:5px 0 0;
    padding:0 0 0 5px;
}
#badges li a {
    text-decoration: none;
}
#badges li b {
    font-weight: bold;
    color: #333333;
    border-bottom: 1px dotted #806c55;
}
#badges li a:visited b {color: #333333;}
#badges li a:hover {
    background:red;
    border-color:#000
}
#badges li a:hover b {color: #880000;}
#badges li img {
    padding:6px;
    background-color: #696969;
    border: 1px solid #232323;
}
#badges li a:hover img {
    background:green;
    border-color:#fff;
}

Just tweak the colours to suit.

Note that you have used the id=“badges” multiple times in your code and ids mmust be unique per page so it would need to be a class. In my example I used one iD and then targetted the inner elements without the need for more classes on any of the elements inside.