title: Hover effects on icon image?
body: <p>I made a thread earlier about putting icons inline. But now, I'm having trouble trying to hover an icon image. For example, say I have a facebook icon, if the mouse is on this icon, I want this icon to bright a bit (not the background, just the icon) in order to indicate that the cursor is on the icon. From my memory, this was done through having two separate images (one with normal icon, the other being brighter than the normal icon) and you fiddle around with the background image within hover in css but I can't seem to work this out. In this example, say the facebook1.png is bright version and facebook.png is a normal one.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a class="icons" href="http://www.facebook.com"&gt;&lt;img src="images/facebook.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.icons a{
  
     display: inline-block;
      width: 64px;
      height: 64px;
  }
  
   .icons a:hover {
     background: url(../images/facebook1.png);
   }
  </code></pre>
  
  <p>still can't seem to get this to work...</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks in advance.</p>