如何使用css使图像缩放到左侧而不是悬停效果？

Question

正在开发一个简单的图像视图，我希望当用户放置一个mouser点时，图像可以放大到左侧。目前我已经能够缩小图像但默认情况下它会向右移动。这是我的代码

.imageDiv {
  position: static;
  height: 130px;
  width: 160px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  transform: scale(1);
}

.imageDiv:hover {
  width: 300px;
  height: 250px;
  position: relative;
  display: block;
  border: 3px solid #fed136;
  background-color: #b20000;
  border-radius: 20px;
  position: relative;
  z-index: 999;
}

<div class="imageDiv">
  <img src="./img/images/mobilePhone.png">
</div>

请帮助