CSS: round corners + opacity = image disappears in Firefox 19

Question

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.

The CSS is pretty simple:

.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;
}

html also just for a test (this is first image that I have googled):

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

You can see it on jsfiddle: http://jsfiddle.net/9DjLT/3/

Browser: ff19

Answer 1

I encountered this problem recently while trying to implement block-level links on my website, and I solved it by adding the following rule to the un-hovered img declaration:

border: 0.001em solid transparent;

A hack, to be sure, but it seems to work.