记录 CSS 鼠标悬停图片放大实现

记录 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);
}

预览：