Ruslan2230
6/3/2018 - 2:54 PM

Color tinting — with blending modes

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;
}