Изменение background плавно сверху вниз при наведении курсора и убирании - jQuery - Ответ 13433099

.myClass{
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px -100px;
    background-color: #ddd;
    margin: 5px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
 
.myClass:hover{
    background-position: 0px 0px;
}
 
.myClass:nth-child(1){
    background-image: url(https://pp.userapi.com/c846217/v846217941/1d06c7/46ZoBP1e9FU.jpg);
}
 
.myClass:nth-child(2){
    background-image: url(https://pp.userapi.com/c846217/v846217941/1d06ce/SYQn5mpdp74.jpg);
}

.myClass{
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: 5px;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
 
.myClass:nth-child(1):hover{
    background-color: red;
}
 
.myClass:nth-child(2):hover{
    background-color: green;
}