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

我正在使用以下代码放大图像：

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

.缩略图{
宽度：100%；
高度：450px；
溢出：隐藏；
}
.形象{
宽度：100%；
身高：100%；
}
.图像img{
-webkit过渡：所有1s轻松；/*Safari和Chrome*/
-moz过渡：所有1s轻松；/*Firefox*/
-ms转换：所有1都很容易；/*IE 9*/
-o-transition:all 1s轻松；/*Opera*/
过渡：所有的1容易；
}
.图片：悬停img{
-webkit转换：缩放（3）；/*Safari和Chrome*/
-moz变换：缩放（3）；/*Firefox*/
-ms变换：比例（3）；/*IE 9*/
-o变换：缩放（3）；/*歌剧*/
变换：尺度（3）；
}

目前，此代码除“in”外有效，它只会缩放到图像的中心。 我的问题是：如何放大到预先确定的位置（可以是相对于当前中心的左或右）。如果可能，我希望使用CSS实现结果。

使用属性，您可以设置原点。这将允许您控制缩放从/到的位置

---

变换原点：右上角等。
谢谢您的帮助。