If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Border Around Image (with Caption) Changing on Hover+

Hi,

I would like to put a border around an image that has a caption under it that only lights up on hovering. And also have the caption change colors on hovering.
The border needs to be around the image and caption together.

Emulating what is going on here. http://www.ideo.com/work/
If you scroll down over the project photos area. Hovering over the image area, including the text "zone", makes a border appear.

So far I have used this CSS styling to add a border and place a caption.

Your CSS suggestions would need to work on an anchor tag, which you don't have in your markup, so that's why they aren't proving fruitful. You have the right idea with the :hover pseudoclass though so it should be fixed with something like this;

I am going to open this up again because something funny is now happening with this styling.

The area of the page these images are in won't actually contain them.
Meaning, I tried to put a background or border color to the area of the page they are in, and the area shows up as being "0" pixels tall, instead of being the height of a container that holds all the images.

HOWEVER, if the HTML is like this, without the "div class" styling for the images/links, then the background color and border color of the "project-menu-area" show, because the area looks to be the height of the zone behind all these images: