Info box on hover

Do any of the resident CSS wizards know of an easy way to make a stylized hover element – like an info box? I guess similar to what Paul did on his site where he has examples and you rollover each to see an image.

My use would be hovering over an image and a text box appears with a paragraph of info. Ideally, I’d like to be able to adjust the background, border, text color, etc. Thoughts?

EDIT: Need this to work for both IE and Firefox if possible.

Here’s one way. It uses the Suckerfish script.

And the code (for posterity) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hover - info box</title>
<script type="text/javascript">//suckerfish//
sfHover = function() {
	var sfEls = document.body.getElementsByTagName("A");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);
<style type="text/css">
a span {
border: 1px solid navy;
a:hover span, a.sfhover span {
* html a span { /*this is for IE as it positions the box to the right of the image */
a {
<p><a><img src="wine.jpg" width="50" height="50" alt=""/><span>Here's some info.</span></a></p>

Or without js as follows :slight_smile:

Thanks guys! I found another way here:

Worked nicely with a few edits.

Thanks guys! I found another way here:

Another way lol - thats the same as the method I posted :slight_smile:

Eeeeek. Sorry. I just looked at the page - not the code. That just solidified that I’m doing it the right way then!