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