Basic Css Hover Image-swap?

I'm a super beginner at web development and I have a question about trying to 'swap' two images. I have this CSS and markup written but for some reason it does not seem to be work

Solution 1:

One way to do it is to forget the <img>, and on :hover change the background-image URL.

#home {
    background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat;
    height: 600px;
    width: 600px;
}

#home:hover {
    background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg)  no-repeat;
}

Working example: http://jsfiddle.net/c9sRa/

If you put your cursor over the wolf it will change to a picture tiger cubs :-)