css过渡动画，鼠标移上去就变大（缓慢变大、过渡效果、放大的过程是过渡动画的，这个过渡动画是有时间控制的）

<template>
  <div>
    <div class="li">
      <img src="../assets/123.jpg" alt>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  methods: {},
  components: {},
  mounted() {}
};
</script>

<style  lang="scss">
.li {
  width: 300px;
  height: 300px;
  border: #000 solid 1px;//设置div的边框
  margin: 50px auto;
  overflow: hidden;//overflow 属性规定当内容溢出元素框时发生的事情。http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
}
.li img {
  cursor: pointer;//cursor 属性规定要显示的光标的类型（形状）
  transition: all 0.6s;//设置图片变大的属性，表示所有的属性变化在0.6s的时间段内完成。https://www.cnblogs.com/afighter/p/5731293.html
}
.li img:hover {
  transform: scale(4,4);//表示在鼠标放到图片上的时候图片按比例放大4.4倍。https://www.cnblogs.com/xiaoxingyiyi/articles/4838648.html
}
</style>

注：over