blinking images on hover with css transition and opacity

Question

does anyone know why on webkit browsers (chrome, opera), images on hover are blinking? This case is only on second column. There is an example http://codepen.io/anon/pen/fxJAk

How can I fix it? Is it only webkit browsers bug? It works properly on firefox and even on Internet Explorer 11.

It's on chrome Version 33.0.1750.146, Opera 20.0.1387.64

Answer 1

Try add css rules for img below:

-webkit-transform:(0); -moz-transform:(0); -o-transform:(0); transform:(0);

http://codepen.io/anon/pen/FpwIy

Answer 2

The usual workaround (for WebKit) is to add:

img {
    -webkit-transform: translateZ(0);
}

Updated codepen