Images with opacity "jumping" on hover in Firefox

Question

I have an image which I've faded out using `opacity` css. The opacity of the image returns to `1` when hovered. 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? Here's a fiddle: http://jsfiddle.net/jngS8/5/ ```

``` CSS: ``` img { height: auto; max-width: 100%; } .container{ width:200px; } .opacity { opacity: 0.6; } .opacity:hover { opacity:1; } ```

Accepted Answer

Set

```
-moz-backface-visibility: hidden;
```

on the image.

Source: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/. That article is talking about CSS transitions, but looks like it works without transitons, too.

http://jsfiddle.net/jngS8/6/

Images with opacity "jumping" on hover in Firefox

Solution

Problem