Border Around Image (with Caption) Changing on Hover+

**questions** · 05-12-2013, 09:07 AM

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.

Code:

		.project-image {
		  float: left;
		  padding: 5px;
		  border: 1px solid #fff;
		  margin: 5px;
		}
		
		.project-image p {
		  margin-top: -5px;
		  text-align: right;
		  font-style: italic;
		  text-indent: 0;
		  font-weight:700;
		}

HTML:

Code:

        <div class="project-image">
            <img src="somephoto.jpg" alt="somephoto" width="200" height="100">
            <p>photo caption</p>
        </div>

I tried, in error, to make styles for .project-image a / .project-image a:hover, but they didn't work at all.

I need to mention that I need the caption to move around with the image, so they can't be statically located one on top of the other.

I'm not "superwellversed" in CSS/HTML... but this page is doctype HTML 5.

Thank you!

**Beverleyh** · 05-12-2013, 10:27 AM

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;

Code:

.project-image:hover {
...
}

.project-image p:hover {
...
}

**questions** · 05-12-2013, 08:22 PM

Awesome! That works!

And in fact, because the whole area of the border, including the caption text is "selected" on hover, I don't need to put the second "p:hover" style in.

I can put the color change of the paragraph text in the "image:hover" style. Actually necessary, so the text color changes while hovering anywhere over the area.

Code:

		.project-image:hover {
		  padding: 5px;
		  border: 1px solid #000;
		  margin: 10px;
		  color: #00f;
		}

Thank you so much... this could have taken hours... days to guess to figure out!

**questions** · 05-14-2013, 09:12 PM

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.

CSS:

Code:

	#project-menu-area {
		position: relative;
		width: 1180px;
		margin: 0 auto;
		background-color:#069;
                border: 1px dashed #ccc;
		}

               .project-image {
		  float: left;
		  padding: 7px;
		  border: 1px dashed #ccc;
		  margin: 16px 8px 0;
		  color: #8e8c96;
		}
		
		.project-image p {
		  margin-top: -5px;
		  text-align: right;
		  font-style: italic;
		  text-indent: 0;
		  font-weight:700;
		  margin-bottom: 5px;
		}
		
		.project-image:hover {
		  padding: 7px;
		  border: 1px solid #ee3824;
		  margin: 16px 8px 0;
		  color: #ee3824;
		  background: #fff;
		}

If the HTML is like this, no background or border color shows of the "project-menu-area" area because the area looks to be "0" pixels tall:

Code:

<div id="project-menu-area">
        
    <div class="project-image">
        <a href="link1.html"><img src="photo1.jpg" alt="photo name 1" width="200" height="100"></a>
        <p>caption</p>
    </div>       
    <div class="project-image">
        <a href="link2.html"><img src="photo2.jpg" alt="photo name 2" width="200" height="100"></a>
        <p>caption</p>
    </div>
    <div class="project-image">
        <a href="link3.html"><img src="photo3.jpg" alt="photo name 3" width="200" height="100"></a>
        <p>caption</p>
    </div>       
    <div class="project-image">
        <a href="link4.html"><img src="photo4.jpg" alt="photo name 4" width="200" height="100"></a>
        <p>caption</p>
    </div> 

</div>

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:

Code:

<div id="project-menu-area">

        <a href="link1.html"><img src="photo1.jpg" alt="photo name 1" width="200" height="100"></a>

        <a href="link2.html"><img src="photo2.jpg" alt="photo name 2" width="200" height="100"></a>

        <a href="link3.html"><img src="photo3.jpg" alt="photo name 3" width="200" height="100"></a>

        <a href="link4.html"><img src="photo4.jpg" alt="photo name 4" width="200" height="100"></a>

</div>

It's really weird...

AND, I should mention, even thought the border and background color of the "project-menu-area" don't show, the width and auto margin styles are recognized and work.

Thanks!

**Beverleyh** · 05-14-2013, 10:15 PM

Yeh, that's a nice little side effect of floated elements (you have "float-left" on the .project-image class) - causing the container div to collapse around them.

You have to clear the floats, either by adding something like <br style="clear:both" /> after the last floated element or by setting overflow:auto; on the #project-menu-area container div.

Here's some reference info that helps to explain it: http://www.quirksmode.org/css/clearing.html