CODEWITHSUNDEEP
htmlcsseffect
user3211337
user3211337

Reputation: 85

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:

http://i.imgur.com/ihYRYiJ.png

(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.

Upvotes: 1

Views: 161

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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/

Upvotes: 1

Related Questions