$img: 'https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png';

​

.pic {

    width: 300px;

    height: 200px;

    margin: 30px;

    float: left;

    background: url($img),

        linear-gradient(#f00, #00f);

    background-size: cover, 100% 100%;

    background-position: 0 0, -300px 0;

    background-blend-mode: luminosity;

    background-repeat: no-repeat;

    transition: .5s background-position linear;

    cursor: pointer;

}

​

.pic1 {

    background-image: url($img),

        linear-gradient(90deg, #ff5722, #03a9f4); 

}

​

.pic2 {

    background-image: url($img),

        linear-gradient(-180deg, #00bcd4, #fa1a09); 

}

​

.pic3 {

    background-image: url($img),

        linear-gradient(45deg, #ffc107, #3f51b5, #4caf50, #ff0057, #fae105, #5c00ff); 

}

​

.pic:hover { 

    background-position: 0 0, 0 0; 

}

​