Wie in eine bestimmte Stelle eines Bildes vergrößern CSS

Question

ich den folgenden Code verwenden in ein Bild um es zu vergrößern:

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

Derzeit Dieser Code funktioniert mit Ausnahme in nur das Zentrum des Bildes vergrößere . Meine Frage ist: Wie kann ich in einen vorgegebenen Ort zoomen (könnte so einfach wie links oder rechts im Gegensatz zu der Mitte, die es derzeit ist). Ich möchte das Ergebnis mit CSS wenn möglich erreichen.

Answer 1

Verwenden Sie die Transform Origin Eigenschaft, und Sie können den Ursprungspunkt festlegen. Dadurch können Sie steuern, wo der Zoom von/bis erfolgt.

transform-origin: top right; usw.