image rollover to change text & padding color?

Discussion in 'CSS' started by motionphi, May 17, 2010.

0
  1. #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:

    http://www.motionphi.com

    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
     
    motionphi, May 17, 2010 IP
  2. ampg-it

    ampg-it Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi DS

    Here's the code for the rollover image, unfortunately I haven't got time at the moment to do the rest.

    .imgborder {
	border:5px;
	border-color: #696969;
	border-style: solid;
}
a:hover .imgborder, a:active .imgborder {
	border:5px;
	border-color: #a90000;
	border-style: solid
}
    Code (markup):
     
    ampg-it, May 17, 2010 IP