<!DOCTYPE HTML>
<html>
<head>
<style>
.b1 {
position: relative;
margin-top: 160px;
}
.b1, .b2, .b3 {
width: 66px;
height: 66px;
background: url(data:image/gif;base64,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) 0 0;
}
.b1:hover .b2 {
bottom: 66px;
}
.b1:hover .b3 {
bottom: 132px;
}
.b2, .b3 {
position: absolute;
left: 0;
bottom: 0;
transition: bottom .3s ease-in;
z-index: -2;
}
.b2 {
background-position: 0 -66px;
z-index: -1;
}
.b1 {
background-position: 0 -132px;
}
</style>
</head>
<body>
<div class="b1"><div class="b2"></div><div class="b3"></div></div>
</body>
</html>