Is there a jquery plugin that you can use to gray out an image and add another image partially over the grayed out one?

Question

I'm working on a page where I need a way for when the user mouses over an image, it grays out and a shows a gear icon over that image. If there's no way for the image to gray out, then is there a way just to overlay the gear icon on the top-right corner of the image?

Answer 1

You can't use a grayscale effect in all modern browser (i think only IE supports that). Another method is to use two images and on hover the gray image will show up. Something like this.

You can use an jquery hover effect for showing a div that has an absolute position over the img.

Something like:

$("#YOURIMGID").hover(
  function () {
    $(this).next("#GEARID").show());
  }, 
  function () {
    $(this).next("#GEARID").hide());
  }
);

You html would be something like:

<div style='position:relative;'>
<img src='image.jpg' alt='' id='YOURIMGID' />
<div style='position:absolute;display:none;' id='GEARID'><img src='gear.png' alt='gear'/></div> 
</div>

ps. don't copy my code, better use of css and html would be nice ;-), this is just too give you an impression.