CSS Image Notes Hover

This is another CSS experiment, similar in some ways to the CSS drop down menu, but for displaying notes about an image. The idea is to have a little information icon appear on top of the image, that will display more some notes about the image when you hover over it. Here’s an example of what I mean.

Because this relies on :hover, this will not work in IE6, but I added a work around this time. I have tested it sucesfully in Firefox, Camino, Safari, and Opera.

To start I just put an image inside a div element, with some text above it.
<div id="image1"> <span>image was uploaded on november 20th, 2007</span> <img src="http://farm3.static.flickr.com/2036/2049684457_55c7c43cf4.jpg?v=0" alt="pumpkins"/> </div>
I’m using a div element with id image1 with the assumption that you may have more images on the page, possibly with different styles.

The span that contains the text is what we’ll be hiding initially. Here’s the first line for the style sheet
#image1 span{text-indent:-2000px; position:absolute; width:486px; padding:7px; display:block; background:url("info.png") no-repeat;}
I’m using text-indent:-2000px to hide the text, position:absolute so the notes appear on top of the image, and the background tag to show the little red info button.

Now to make the hover work
#image1 span:hover{text-indent:0px; background:#000; color:#fff;opacity:.8;}
text-indent:0px will bring the text back into view, setting a new background will make the info image disappear, and finally I’ve used opacity just so you can see through to the image behind the text. Remember that while opacity will work Firefox, Camino, Opera, and Safari, it won’t validate, so you can take it out if you want. It’s not vital. And I haven’t bothered with filter: alpha(opacity=) because this hover won’t work in IE6 anyway.

So finally, I added a little work around for IE6. The hover won’t work, but we can still make the information appear.
<!--[if lte IE 6]> <style type="text/css"> #image1 span{width:500px; text-indent:0px; position:relative; background:#000; color:#fff; displapy:inline;} </style> <![endif]-->
Just insert that after your style sheet. You can create an external style sheet for it too, whatever you prefer. And go dig around the example to see exactly how it works.