How to create a hover effect for static background images…?

Question

I'm not a JS-guy but I am trying to find a way to make a "bubble" appear with content in it when a visitor mouses over a background image. The HTML looks like this:

<div id="certifications">
        <p class="gold left">Microsoft Gold Partner</p>
        <p class="sdvo center">Service Disabled Veteran Owned Small Business</p>
        <p class="ibm right">IBM Authorized Partner</p>
</div><!-- end #certifications -->

And, the CSS looks that controls that area looks like this:

#certifications {
height: 111px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

#certifications p {
margin-top: 20px;
text-indent: -9999px;
}

#certifications .gold {
background-image: url(images/microsoft-gold.jpg);
background-repeat: no-repeat;
display: inline;
height: 70px;
width: 33%;
float: left;
margin-top: 25px;
padding: 0;
}

#certifications .sdvo {
background-image: url(images/sdvosb.png);
background-repeat: no-repeat;
display: inline;
height: 100px;
width: 30%;
float: left;
margin-left: 20px;
}

#certifications .ibm {
background-image: url(images/partners/IBM.png);
background-repeat: no-repeat;
display: inline;
height: 99px;
width: 31%;
margin-top: 25px;
margin-left: -50px;
}

When someone mouses over any of the three background images, I'd like the effect to appear (ideally using just CSS, but if I need to use JS then it's not a big deal). The key thing is making it backwards compatible to IE6.

I'm going to keep researching this and will post if I find the answer, but I'd truly appreciate any insight you guys might have to offer. Thanks for your time and insight!

Answer 1

I a fan of lazy coding and not reinventing the wheel. These guys have already done it a dozen different ways. http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/