Color tinting — with blending modes
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<div style="background-image:url(http://csssecrets.io/images/tiger.jpg)" class="tinted-image"></div>
/**
* Color tinting — with blending modes
*/
.tinted-image {
width: 640px; height: 440px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}
.tinted-image:hover {
background-color: transparent;
}