如何放大圖像的特定位置使用CSS

Question

我使用下面的代碼來放大圖像：

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

目前此代碼的工作，除了將只放大到圖像的中心。 我的問題是：如何縮放到預定位置（可以像左側或右側那樣簡單，而不是當前的中心）。如果可能，我希望使用CSS實現結果。

Answer 1

使用Transform Origin屬性，您可以設置原點。這將允許您控制放大/縮小的位置。

transform-origin: top right;等