Transition on img element cause size change or moving

Question

I do opacity transition on img element as it is in here and i see that img size changing or img is moving when transition on end or start;

Here is simple css code for styling.

img{
    height:165px;
    width:165px;
    opacity:0.4;
    transition: all linear 1s;
}

img:hover{
    opacity:1;
}

I tested it on Chrome 31 version. How can i get rid of this problem ?

Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%

Answer 1

Seems to be a bug in Chrome, just transitioning the opacity makes no difference for me.

Apply a 3D transform, of nothing, to resolve the issue.

-webkit-transform: translateZ(0);

Answer 2

I don't see the movement but you can try with just the specific property instead of all:

transition: opacity linear 1s;

The demo http://jsfiddle.net/cKUFD/4/

Answer 3

I Had the same problem, so i tried different images in this fiddle:

https://jsfiddle.net/s04428yc/15/

The first image works fine, while the second contracts on hover. So i came to the conclusion that the image ratio is causing the problem.

And the solution was, like @addedlovely already stated:

-webkit-transform: translateZ(0);

and this should be applied on the element without the hover pseudo selector.

Or one could simply change the actual image ratio.