记录 CSS 鼠标悬停图片放大实现
html
<div class="img-wrap">
<img class="img" src="http://XXXXXXXXXXXX">
</div>
css
.img-wrap{
width:300px;
height: 200px;
overflow: hidden;
}
.img-wrap .img{
width: 100%;
height: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition: all 1s ease 0s;
vertical-align: middle;
}
.img-wrap:hover .img{
-webkit-filter: brightness(.6);
filter: brightness(.6);
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);
}
预览: