div{
cursor: pointer;
width: 130px;
height: 130px;
position: relative;
overflow: hidden;
}
img{
border: 0 none;
vertical-align: middle;
}
.mask{
height: 100%;
width: 100%;
z-index: 10;
position: absolute;
}
.avatar{
height: 100%;
width: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
position: relative;
transition: all 0.3s ease 0s;
display: inline;
}
div:hover .avatar{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
<div>
<img src="people-circle.png" class="mask">
<img src="people.jpg" class="avatar">
</div>