How to make an image appear on the hover of another image?

Question

For a school project we have been assigned to make a website to showcase a recent stop motion we have made. I am getting along well however i have encountered a problem. I would like to know how to make an image appear on hover of another image. I have placed both selected images in and one of them turns to color when hovering with a webkit transition and have done a fade in with the other. However I would like the image that fades in to be linked in with the other, so that when hovering over the image that turns from grayscale to color the other image fades in with it. Need answers asap. Cheers.

Answer 1

If you simply want to hide, here is solution without jQuery, you can check it live here: http://jsfiddle.net/wDVUd/

HTML:

<img id="imageToHover" src = "http://farm4.static.flickr.com/3187/2663569943_42ec767f27_m.jpg" alt="hover me"/>

<img id="imageToShow" src = "http://farm4.static.flickr.com/3118/2918431127_ae33f59953_m.jpg" alt="image to show"/>

CSS:

#imageToShow
{
    display: none;
}

JS:

document.getElementById('imageToHover').onmouseover = function() {
    document.getElementById('imageToShow').style.display = 'inline';   
}

document.getElementById('imageToHover').onmouseout = function() {
   document.getElementById('imageToShow').style.display = 'none';   
}

Answer 2

you want something like this .. follow link

$('.div1 li').hover(function(){
   var imgID = $(this).find('a').attr('href');
   $(imgID).fadeIn();
});