transizione di dimensioni di sfondo al passaggio del mouse fa sì che il cromo "scuota" l'immagine di sfondo

Question

Sto cercando di ottenere un effetto che ho visto di recente, in cui l'immagine di sfondo si ingrandisce al passaggio del mouse. L'ho praticamente fatto con l'esempio qui: https://jsfiddle.net/qyh6nbwt/ ma sembra essere molto traballante (capirai cosa intendo passando sopra di esso), sono su osx con l'ultima versione di Chrome, non l'ho ancora controllato in altri browser. C'è un modo per renderlo più fluido, quindi non "agita" sullo zoom in?

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; 
} 

Answer 1

basta usare trasformare, scala.

quindi basta invece di impostare l'immagine bg all'uso 160%

transform:scale(1.5); 

alcune informazioni sulla proprietà css trasformare potete trovare here

di utilizzare la scala di trasformare nel vostro caso avrete bisogno di un involucro con troppopieno nascosto in modo che solo il div interno diventi più grande e tagliato dal div esterno.

sempre aggiornate fiddle.

saluti timmi

Answer 2

Usato trasformare scala invece di una transizione di cambiamento di fondo-size:

transform: scale(2, 2); 

Answer 3

Così ho fatto questa mia missione di capire questo, risulta non era una soluzione così semplice come pensavo.

E 'un po' sporca, ma è necessario per inquadrare il div entro un div come questo:

<div class="example"> 
    <div></div> 
    <p>test</p> 
</div> 

Poi da qui, è possibile indirizzare gli zoom più precisamente, in questo modo:

div.example { 
    height: 250px; 
    width: 250px; 
    overflow: hidden; 
    position: relative; 
} 

div.example > div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    -moz-transition: all 1.5s; 
    -webkit-transition: all 1.5s; 
    transition: all 1.5s; 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg'); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    z-index: -1; 
} 

div.example:hover > div { 
    -moz-transform: scale(2,2); 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2);  
} 

È possibile regolare lo zoom e la velocità utilizzando le proprietà scale e transition.

Qui è un lavoro fiddle da dimostrare. Spero che questo aiuti, ho controllato in Chrome/Safari/Firefox e sembra funzionare abbastanza bene.