Adding text titles to inline <li> images - html

Question

I am building a portfolio site and am looking to add html text titles under my home page images. The images are formatted in an inline list, floated left. I'm somewhat new to this, so bear with me if it's ultra simple. I'd like the text to align left under each image and be hidden upon rollover.
Page:
http://www.lauradimeo.com/TEST/index2.html
Forgot to add -- I'd like this to look great on a tablet device. I know the rollovers won't work but otherwise it should be ipad, etc friendly.
thank you!

Answer 1

I think I have what you're looking for using a CSS-only (no Javascript) approach: demo page
Inside your first list item I inserted a div:
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>
And I added z-index attributes to your li/a/img elements:
#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;
}
Take a look at how to use z-index 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.
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. =)

Answer 2

Try wrapping the images in a container like a <div>-tag (you can also use a <table>). Insert the image into a div tag and put the text in too. Upon mouse-hover, use javascript to hide the text and make the image larger.

Answer 3

Another possible solution would be to absolutely position the images in your li's, and use margins / padding to position your text under the images as to be visible until the image is moused over. While this approach would likely allow you to retain your no-JavaScript hover effects, it may not be the easiest to implement as your markup stands currently.

Answer 4

you can also try using the dl, dt, dd tags. It would get you the same result and you can use javascript to show and hide the text. You can specify the width of the DIV and DL. Then you can have the DL float: left inside that DIV. Please let me know if this is helpful.
Link to the DL tag
http://www.w3schools.com/tags/tag_dl.asp
<div id="main-holder">
<dl id="box1" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
<dl id="box2" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
</div>