Search code examples
jquerycssimagehoverrollover

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 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

Solution

  • 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.