title: hide the background image when the hover image appears using css
body: <p>I am using CSS for hover and it works, but the hover image  allow the background image (<code>pic_normal</code>) to display like transparent behind the  image(<code>pic_hover</code>). </p>
  
  <p>How to display only the hover image when mouse over on it?</p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;img id="first" src="images/clients/pic_normal.png" /&gt;
  </code></pre>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#first img:hover {
      background-image: url("/images/clients/pic_hover.png");
      background-repeat: no-repeat;
  }
  </code></pre>