Basic CSS Hover Image-Swap?

Question

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 working. The second image that's supposed to swap in when hovering over the first image simply lies on top of the first image on the page. CSS: ``` .home { margin: 0; padding: 0; background: url('images/onhome.png') no-repeat; } .home a, .nav a:link, .nav a:visited { display: block; width: 90px; height: 25px; } .home a:hover img { visibility: hidden; } ``` HTML: ```

``` I'm not sure what's going wrong, and I'd be very appreciative if someone can help me. If there's another better way to do this, I would be definitely open to that too.

Accepted Answer

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 :-)

Basic CSS Hover Image-Swap?

Solution

Problem