Show information over image on rollover

Question

I want to be able to show information (HTML basically) over an image when the mouse rolls over the image... I know there is 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

Answer 1

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/

Answer 2

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.