Looking to achieve a specific image style by transforming a full color photo in the following ways:
- Convert it to greyscale
- Adjust the black levels (via decreased opacity or brightness)
- Apply a "multiply" blend mode with a blue color overlay
So far, I've only managed to implement one of the effects (either multiply and greyscale OR opacity/levels)
Any suggestions on how to combine both of these effects on either an img element or background image?
View the CodePen demo: http://codepen.io/jeremypbeasley/pen/vENBqO
Current CSS:
body {
margin:50px;
}
.test:parent {
overflow:auto;
background:#0c98f2;
width:500px;
height:320px;
}
.test {
background-image:url(http://f.cl.ly/items/0z1I403f1a3O3v0o0l2b/PageImage-531144-5235316-finalselectsjared12.jpg);
background-size:cover;
background-blend-mode:multiply,normal;
background-color:#0c98f2;
opacity:.5;
width:500px;
height:320px;
}
img {
width:500px;
}