<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.