title: Images with opacity "jumping" on hover in Firefox
body: <p>I have an image which I've faded out using <code>opacity</code> css. The opacity of the image returns to <code>1</code> when hovered.</p>
  
  <p>However, in Firefox, it appears to "jump" a little when hovered over. It seems to be something to do with the way Firefox smooths the image while faded - is there a way around this?</p>
  
  <p>Here's a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/jngS8/5/" rel="nofollow">http://jsfiddle.net/jngS8/5/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;a class="opacity"&gt;
          &lt;img src="http://imgur.com/EhiSptf.png" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img {
      height: auto;
      max-width: 100%;
  }
  .container{
      width:200px;
  }
  
  .opacity {
      opacity: 0.6;
  }
  .opacity:hover { 
      opacity:1;
  }
  </code></pre>