Estoy tratando de lograr un efecto que vi recientemente, donde la imagen de fondo se acerca al pasar el mouse. Lo hice más o menos con el ejemplo aquí:https://jsfiddle.net/qyh6nbwt/ pero parece ser muy inestable (comprenderá lo que quiero decir al pasar el mouse sobre él), estoy en osx ejecutando la última versión de Chrome, aún no lo he comprobado en otros navegadores. ¿Hay alguna manera de hacerlo más suave para que no se "agite" al hacer zoom?

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}