Показать сообщение отдельно
  #3 (permalink)  
Старый 10.11.2015, 02:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<!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>

Последний раз редактировалось laimas, 10.11.2015 в 03:14.
Ответить с цитированием