CSS Hover Over Tooltip

[Rebirth Studios]

I have created a CSS Hover Tooltip feature for a project I'm working on. I've been able to get it working cross-browser, but I had to use an IE hack. Can someone suggest an improvement, or is the way I have it setup good?

Basically, it's a text link which on hover creates a background image with an image overlaying on top. In front of the text link, defined with a class, is an icon which depicts a camera--which does a rollover when text is hovered.

HTML:

<p>Beavers and <a class="thumbnail" href="#thumb">Ducks<span><img src="images/Ducks.jpg" width="200" height="200" alt="Quacking Ducks" /><br />Ducks</span></a></p>

CSS:

* html .thumbnail {
    background-attachment: fixed;
}
.thumbnail {
    position: relative;
    z-index: 0;
    padding-left: 17px;
    background: url(../images/icon-camera.gif) left no-repeat;
}
.thumbnail:hover {
    z-index: 50;
    background: url(../images/icon-camera-hover.gif) left no-repeat;
}
.thumbnail span { 
    position: absolute;
    visibility: hidden;
    left: -1000px;
    width: 330px;
    height: 257px;
    padding: 15px;
    color: #000;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    background: url(../images/bg-hover.gif) no-repeat;
}
.thumbnail span img { 
    border-width: 0;
}
.thumbnail:hover span { 
    visibility: visible;
    left: 5px; 
    top: 18px;
}

Thanks

[Tyssen]

background-attachment: fixed doesn't seem right as it's only sposed to work on the body in IE6 anyway. Sounds like you're trying to do a similar thing to this.