实现的效果,鼠标放上去之后,图片放大。父级div设置宽度高度,并添加 overflow: hidden;
img里面添加 transition: transform 1s;
.imges{
width: 100%;
height: 150px;
overflow: hidden;
img{
width: 100%;
height: 100%;
transition: transform 1s;
}
}
立即学习那个按钮隐藏
.studys {
color: #ffffff;
position: absolute;
bottom: 52%;
left: 30%;
border-radius: 5px;
font-size: 18px;
padding: 8px 40px;
background-color: #188eee;
transition: opacity 1s;
opacity: 0;
}
鼠标放上去时图片放大,然后透明度由0变成1
.imges>img{
transform: scale(1.1)
}
.studys {
opacity: 1;
cursor: pointer;
}