实现的效果,鼠标放上去之后,图片放大。父级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; }