Change Image on Hover with CSS?

css, html

Solution

Your `<div class="main">` is getting `c.png` as its background – you just can't see it behind the `<img src="b.png">` element.

Try removing that `<img>` tag, and using this for your CSS:

.main {
    background-image: url(b.png);
}

.main:hover {
    background-image: url(c.png);
}

You probably also need to give `.main` a height and width, since it no longer has anything inside it to give it a size.

Problem

I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong? index.html ``` <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="main"> <img src="b.png" /> </div> </body> </html> ``` style.css ``` .main:hover { background-image: url('c.png'); } ```

Original source