CODEWITHSUNDEEP
htmlcsshoverproject
Darius Andreas
Darius Andreas

Reputation: 1

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

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.

Upvotes: 0

Views: 1212

Answers (2)

gen
gen

Reputation: 10040

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';   
}

Upvotes: 1

Richa
Richa

Reputation: 4270

you want something like this .. follow link

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

Upvotes: 0

Related Questions