title: Change Image on Hover with CSS?
body: <p>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?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt; 
  &lt;body&gt;
      &lt;div class="main"&gt;
          &lt;img src="b.png" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>.main:hover {
      background-image: url('c.png');
  }
  </code></pre>