<div class="container">
    <div class="pic"></div>
</div>
$img: 'https://user-images.githubusercontent.com/8554143/34350345-4812d23a-ea51-11e7-98eb-461188ce9125.png';

.container {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: transparent;
    transition: .5s background ease-out;
}

.container:hover {
    background: #09f;
}

.pic {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background-image: url($img);
    background-size: cover;
    cursor: pointer;
    background-position: 0 0;
    background-repeat: no-repeat;
    mix-blend-mode: lighten;
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.