Opacity change with hover creates an image shift or distortion

Question

I have a jsfiddle here which shows that with a:hover, changing the opacity shifts (or distorts) the image.

This is visible in Firefox.

Can someone explain what might be going on and how to keep the image from changing? Thanks in advance.

Answer 1

I found an answer on this so post.

For me the solution was to use the following on the img

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
-webkit-backface-visibility: hidden;