Jak przybliżyć do konkretnej lokalizacji obrazu za pomocą CSS

Question

używam następujący kod, aby powiększyć obraz:

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

Obecnie ten kod działa z wyjątkiem in będzie powiększać tylko w środku obrazu . Moje pytanie brzmi: Jak mogę powiększyć do wcześniej określonego miejsca (może być tak proste, jak tylko w lewo lub w prawo, w przeciwieństwie do centrum, które obecnie jest.) Chciałbym osiągnąć wynik przy użyciu CSS, jeśli to możliwe.

Answer 1

Użyj właściwości Transform Origin i można ustawić punkt początkowy. Umożliwi to kontrolowanie miejsca, w którym nastąpi zbliżenie z/do.

transform-origin: top right; itp.