SVG or CSS filter which equals to upper div with opacity

Question

I wonder if there is a simple way to find a CSS filter or SVG filter, which will look the same as I apply div with background and opacity over image.

I need a filter which can be applied to first image to make it look like second image

.img {
  filter: ... 
}

https://jsfiddle.net/1qd6pyfu/

Answer 1

This looks pretty close to a basic multiply blend - like so (I didn't quite match the green color". You can do this with CSS blend modes as well.

<svg width="800px" height="600px">
  <defs>
  <filter id="greenit" x="0%" y="0%" width="100%" height="100%">
   <feFlood flood-color="#8B5"/>
   <feBlend mode="multiply" in2="SourceGraphic"/>
  </filter>

  </defs>

  <image filter="url(#greenit") width="400px" height="400px" xlink:href="https://www.binarymoon.co.uk/wp-content/uploads/2012/04/draw-something-unicorn-e1334932907258.png"/>

</svg>