鼠标移入商品列表项，商品图片动画过渡放大

鼠标移入

完整代码：

<template>
  <div class="container">
    <div class="goods-box">
      <div class="left">
        <div class="bg-img"></div>
      </div>
      <div class="right">
        商品标题
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.goods-box {
  width: 500px;
  background-color: #fff;
  box-shadow: 0px 3px 24px 0px rgba(168, 168, 236, 0.22);
  padding:10px;
  display: flex;
  &:hover {
    cursor: pointer;
    background-color: #eee;
    .bg-img {
      transform: scale(1.5);
    }
  }
  .left {
    width: 120px;
    height: 120px;
    overflow: hidden;
    .bg-img {
      width: 100%;
      height: 100%;
      background-image: url("//img13.360buyimg.com/n7/jfs/t1/134599/11/4954/111549/5f16626cEdcb0b187/222190e73c5b14e5.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      transition: all 0.2s;
    }
  }
  .right{
    padding:20px;
  }
}
</style>