Q:

Apply effect over image with CSS

I have a background image with many details, and I need to apply some kind of css/html filter to have this effect:

(left side with a layer effect over it, right side without)
(example was applied with photoshop).
Already tried to overlay an image with opacity, but can't reproduce the same thing.

A:

That filter can be reproduced by using a multiply blend mode. To get the effect, use mix-blend-mode: multiply on an overlay element, like this:

div {
  position: absolute;
  width: 100px;
  height: 100px;
}

#div1 {
  background-color: gray;
  border: solid black 3px;
}

#div2 {
  background-color: teal;
  top: 40px;
  left: 40px;
  mix-blend-mode: multiply;
}
<!-- Underlying div -->
<div id="div1">
</div>

<!-- Overlay div -->
<div id="div2">
</div>

JSFiddle Version: https://jsfiddle.net/sn82mb9v/

