title: CSS: round corners + opacity = image disappears in Firefox 19
body: <p>I want to add rounded corners to my images using CSS and also change the opacity on mouseover because this is cute. There's a bug: after mouseover, the image disappears.</p>
  
  <p>The CSS is pretty simple:</p>
  
  <pre><code>.article img {
    margin-bottom: 5px;
    -moz-border-radius: 15px;  /* for Firefox */
    -webkit-border-radius: 15px; /* for Webkit-Browsers */
    border-radius: 15px; /* regular */
  }
  
  .article:hover .img {
    opacity: 0.8;
  }
  </code></pre>
  
  <p>html also just for a test (this is first image that I have googled):</p>
  
  <pre><code>&lt;li class="article"&gt;
      &lt;div class="img"&gt;
          &lt;a href="#"&gt;
              &lt;img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>You can see it on jsfiddle: <a href="http://jsfiddle.net/9DjLT/3/" rel="nofollow">http://jsfiddle.net/9DjLT/3/</a></p>
  
  <p><strong>Browser: ff19</strong></p>