StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think I have what you're looking for using a CSS-only (no Javascript) approach: <strong><a href="http://dragonskies.com/stackoverflow/laura.html" rel="nofollow">demo page</a></strong></p> <p>Inside your first list item I inserted a div:</p> <pre><code>div.caption { width:200px; /* Because your images are 200px wide, this must match */ clear:both; /* This places the div after the floated image */ position:relative; /* Required to set positioning on the line below */ top:-100px; /* The div would normally appear at the bottom of the image. Move it up a little. */ margin-bottom:-500px; /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */ z-index:2 /* Will explain this later */ } <li> ... <div class="caption">The quick brown fox jumped over the lazy dog</div></li> </code></pre> <p>And I added z-index attributes to your li/a/img elements:</p> <pre><code>#work ul li, #work ul li a, #work ul li a img { position: relative; /* z-index only works on positioned elements */ z-index: 1; /* Default z-index 1 */ display: block; float: left; } #work ul li a:hover, #work ul li a:active { position: relative; /* Hover/active z-index 3 */ z-index: 3; } </code></pre> <p>Take a look at how to use <strong><a href="http://www.w3schools.com/cssref/pr_pos_z-index.asp" rel="nofollow">z-index</a></strong> if you're not familiar with it. On the test page the caption div has a higher z-index than the regular image but a lower z-index than the mouse-overed image.</p> <p>This is a little hacky, but there's room for improvement. Also FYI, your page doesn't look right in IE 7- all the images appear in a single column. My code might not need the hacks if and after you fix your markup. =)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload