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