Opacity, transition and firefox?

Question

HTML

there is an image, when hovering over it, the transparency smoothly changes:

#work img { <br/>
width: 100%; <br/>
opacity: 1.0; <br/>
transition: 0.1s ease-in-out; <br/>
-moz-transition: 0.1s ease-in-out; <br/>
-webkit-transition: 0.1s ease-in-out; <br/>
}<br/>
<br/>
#work article:hover img { <br/>
opacity: 0.3; <br/>
transition: 0.3s ease-in-out; <br/>
-moz-transition: 0.3s ease-in-out; <br/>
-webkit-transition: 0.3s ease-in-out;<br/>
}

the trouble is that firefox shows this change through a black translucent square.
in other browsers everything is fine. corrupts both png and jpg.

Help me to understand

Answer 1

Used such code in css
img {
width: 100%;
opacity: 1.0
transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-webkit-transition: 0.1s ease-in-out;
}
img:hover {
opacity: 0.3;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
}
Firefox 10.0.2 release/debian linux - normal flight works correctly, no black square