CSS3实现鼠标移动到图片上图片变大

转自https://blog.csdn.net/u014175572/article/details/51535768
未放大前

image.png
放大后(放大倍数不是太明显,修改scale调整数值)
image.png

<template>
<div class = 'public-course-wrapper'>
  <h1 class ="title">公开课程</h1>
  <div class ="left-wrapper">
    <img class = 'left-background' src="./module1_1.jpg">
    <p class="text">名师授课<br>专业权威</p>
    <a class="link">查看更多课程 ></a>
  </div>
  <div class = "right-wrapper"></div>
</div>
</template>

<script>
export default {
}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
  .public-course-wrapper
    width :100%
    .title
      font-size :30px
      padding :30px 0
      font-weight : normal
    .left-wrapper
      position :relative
      margin-right :10px
      width :228px
      height :614px
      text-align :center
      overflow :hidden
      .left-background
        height :614px
        width :228px
        cursor: pointer
        transition: all 0.6s
      .left-background:hover
        transform: scale(1.1)
      .text
        position:absolute
        top:70px
        width :100%
        text-align: center
        font-size :30px
        line-height :40px
        color :white
      .link
        position : absolute
        margin-left :-48px
        top:180px
        border :1px solid white
        height :30px
        width :96px
        color :white
        line-height :30px
</style>