title: CSS Sprite issue
body: <p>I'm fighting with some CSS here that doesn't want to be crowbarred into submission. I just want the sprites there, without a border around it, and to lower the opacity when hovered over.</p>
  
  <p>Here's how it looks across browsers so far:
  <img src="https://i.stack.imgur.com/Gd06C.png" alt="enter image description here"></p>
  
  <p>The Chrome version is closest to what I want, but I can't get the border to disappear, and the hover opacity doesn't do anything. </p>
  
  <p>Code-wise, here's where I'm at so far:</p>
  
  <pre><code>.social-icons {
    background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
    width: 32px;
    height: 32px;
  }
  
  .social-icons img {
    border-style: none;
  }
  
  .social-icons img:hover {
    opacity: 0.8;
  }
  
  img#facebook-ico.social-icons {
    background-position: 0px 0px;
  }
  
  img#twitter-ico.social-icons {
    background-position: -34px 0px;
  }
  
  img#google-plus-ico.social-icons {
    background-position: -68px 0px;
  }
  
  img#rss-ico.social-icons {
    background-position: -136px 0px;
  }
  </code></pre>