<!-- Styles. Can be included in an external stylesheet  -->

<style>
/* CSS variables. Not needed for the effect to work. */
:root {
  --base:              #f7392b;
  --bg-blend:          multiply;
  --blur:              0px;
  --fg-blend:          lighten;
  --foreground:        #16006f;
  --opacity:           1;
  --spacing:           1%;
}
.img-wrapper {
  background-color:    var(--base);
  display:             flex;
  flex:                1 1 100%;
  height:              100%;
  overflow:            hidden;
  padding:             var(--spacing);
  position:            relative;
}

.img-wrapper img {
  filter:              grayscale(100%) contrast(1) blur(var(--blur));
  flex:                1 0 100%;
  height:              100%;
  max-width:           100%;
  mix-blend-mode:      var(--bg-blend);
  object-fit:          cover;
  opacity:             var(--opacity);
  position:            relative;
  width:               100%;
}

.img-wrapper::before {
  background-color:    var(--foreground);
  bottom:              0;
  content:             '';
  height:              100%;
  left:                0;
  mix-blend-mode:      var(--fg-blend);
  position:            absolute;
  right:               0;
  top:                 0;
  width:               100%;
  z-index:             1;
}

</style>
<!-- HTML Markup -->

<!-- You should think of `img-wrapper` as the image itself. This element is what you should target for sizing/styling. -->
<div class="img-wrapper">
  <!-- The `::before` pseudo-element will apear here in the Broweser(DOM) and in web-inspector. -->
  <img src="https://picsum.photos/1000?image=874">
</div>