$img: 'https://user-images.githubusercontent.com/8554143/34350345-4812d23a-ea51-11e7-98eb-461188ce9125.png';

​

.pic {

    width: 100px;

    height: 100px;

    margin: 50px auto;

    cursor: pointer;

    transition: .5s all ease-out;

}

​

.pic1 {

    background-image: url($img), linear-gradient(#f09, #09f, #f0f);

    background-blend-mode: lighten;

    background-size: cover;

    background-position: 0 0, 0 120px;

    background-repeat: no-repeat;

}

​

.pic1:hover {

    background-position: 0 0, 0 0;

}