<!-- 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>