Show information over image on rollover

I want to be able to show information (HTML basically) over an image when the mouse rolls over the image... I know there 开发者_如何学Gois a .hover() jQuery function but am unsure how to use it to get the desired effect.

Ideally when a user hovers over an image it would "grey out" (e.g. layer of 50% opacity black) with some HTML like a title etc etc.

Can someone point me in the right direction or provide sample code

Thanks

You could do something along these lines:

Wrap your image and the div to display, like this:

<div class="imgHover">
    <div class="hover">Test Content for the hover</div>
    <img src="myImage.jpg" alt="" />
</div>

With CSS like this:

.imgHover .hover { 
    display: none;
    position: absolute;
    z-index: 2;
}

And finally, the jQuery using .hover() like this:

$(".imgHover").hover(function() {
    $(this).children("img").fadeTo(200, 0.25)
           .end().children(".hover").show();
}, function() {
    $(this).children("img").fadeTo(200, 1)
           .end().children(".hover").hide();
});

You can try the above code out here

This fades the image out and displays the <div> above it when you hover, the wrapping is so that the <div> is absolutely positioned directly above the <img>, if you need a lot of wrapping content, give your .hover div the same dimensions as the image...just depends on the exact look you're going for.

If you are using jQuery anyway, you might want a Tooltips plugin: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/