图示:
html
<div class="big_ewrp">
<div class="image_box">
<img src="http://assets.jq22.com/plugin/2018-06-07-01-19-03.png" />
</div>
</div>
css
<style>
.big_ewrp{
width: 265px;
height: 325px;
background:#F4F4F4;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
overflow: hidden;
margin: 50px auto;
}
.image_box{
width: 100%;
height: 195px;
background: black;
transition: all 1s;
position: relative;
}
.image_box::after{
content: '';
width: 265px;
height: 195px;
display: block;
background: black;
position: absolute;
opacity: 0;
top: 0;
left: 0;
transition: all 1s ;
}
img{
display: block;
width: 100%;
height: 100%;
transition: all 1s ;
}
.big_ewrp:hover img{
transform: scale(1.05, 1.05)
}
.big_ewrp:hover .image_box::after{
opacity: 0.5;
transform: scale(1.05, 1.05)
}
</style>