html>
.containter{
border: 1px solid #aaa;
position: relative;
width: 420px;
height: 300px;
overflow:hidden;
box-sizing: border-box;
list-style:none;
}
.small-img, .big-img{
background-repeat: no-repeat;
background-size: cover;
background-position:center;
}
.small-img{
width: 120px;
height: 60px;
float:right;
border:1px solid #ddd;
border-top:0;
clear:both;
box-sizing: border-box;
}
.big-img{
position:absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
display:none;
box-sizing: border-box;
border: 20px solid #fff;
}
.small-img:hover .big-img, .default-img{
display:block;
}