Come lo zoom in una posizione specifica di un'immagine usando i CSS

Question

Sto usando il seguente codice per ingrandire in un'immagine:

<style type="text/css"> 
.thumbnail { 
    width: 100%; 
    height: 450px; 
    overflow:hidden; 
} 
.image { 
    width: 100%; 
    height: 100%;  
} 
.image img { 
    -webkit-transition: all 1s ease; /* Safari and Chrome */ 
    -moz-transition: all 1s ease; /* Firefox */ 
    -ms-transition: all 1s ease; /* IE 9 */ 
    -o-transition: all 1s ease; /* Opera */ 
    transition: all 1s ease; 
} 
.image:hover img { 
    -webkit-transform:scale(3); /* Safari and Chrome */ 
    -moz-transform:scale(3); /* Firefox */ 
    -ms-transform:scale(3); /* IE 9 */ 
    -o-transform:scale(3); /* Opera */ 
    transform:scale(3); 
} 
</style> 


<div class="thumbnail"> 
    <div class="image"> 
    <img src="example.jpg" alt="Image zoom"> 
    </div> 
</div> 

Attualmente questo codice funziona tranne nello zoom solo al centro dell'immagine . La mia domanda è: come posso zoomare in una posizione predeterminata (potrebbe essere semplice come sinistra o destra rispetto al centro che è attualmente.) Mi piacerebbe ottenere il risultato usando i CSS, se possibile.

Answer 1

Utilizzare la proprietà Transform Origin ed è possibile impostare il punto di origine. Questo ti permetterà di controllare dove si trova lo zoom da/a.

transform-origin: top right; ecc.