I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.

For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.

I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.

I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.

Heres an example of what I have in mind:

Thanks for the help, if anyone could point me in the right direction it would be appreciated.

I can post more information if needed.

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.

For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.

I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.

I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.

Heres an example of what I have in mind:

Thanks for the help, if anyone could point me in the right direction it would be appreciated.

I can post more information if needed.

• javascript
• html
• css

Share Improve this question Follow edited Jul 24, 2011 at 21:51 Ryan asked Jul 24, 2011 at 21:46 RyanRyan 31922 gold badges88 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

This is somewhat simple way of implementing a hover show and hide with jquery.

Working example: http://jsfiddle/va2B8/2/

jQuery ( http://jquery./ ):

$(document).ready(function() {

    $("#Invisible").hide()
    $("#hoverElement").hover(
      function () {
        $('#Invisible').stop().fadeTo("slow", 0.33);
      },
      function () {
        $('#Invisible').stop().fadeOut("slow");
      }
    );

});

html:

<p id="hoverElement">This little piggy will show the invisible div.</p>

<div id="Invisible">This is the content of invisible div.</div>

css:

#Invisible { background: #222; color: #fff; }

Edit: I changed url for the working example cause i forgot to fade out on mouse out.

---

---

Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.

( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle/va2B8/1/ )

You can start using this fiddle :

http://jsfiddle/Christophe/2RN6E/3/

1 div containing image and span like :

<div class="image-hover">
    <img src="" />
    <span class="desc">text to be displayed when imae hover</span>
</div>

Update

All can be done with CSS...

http://jsfiddle/Christophe/2RN6E/4/

Here's an easy jQuery plugin you can implement: http://file.urin.take-uma/jquery.balloon.js-Demo.html

It works like this:

$(function() {
  $('img').balloon(options);
});

This jQuery applied the balloon function to all images on the page. Here's your HTML:

<img src="example.png" alt="Here's your caption." />

The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.

I've just done this:

http://twostepmedia.co.uk

It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.