CSS Multilayer Blending mode

HTML
<section> <figure class="knuckles blend"> <figcaption>K</figcaption> <img src="https://photos.gurushots.com/unsafe/0x0/c8b09618ed863425327c6b69ba2ec353/3_8b182376aa62005258d3088307aa2fe8.jpg" alt> </figure> </section> <svg id="shapeclipper"> </svg>
SCSS
section { width: 100%; margin: 0 auto; } .knuckles{ position: relative; float: left; display: inline-block; width: 40%; padding-top: 50%; overflow: hidden; margin: 0; img, figcaption { position: absolute; width: 150%; top: 0; } img:last-child { mix-blend-mode: multiply; } figcaption { font-family: sans-serif; font-weight: 400; font-size: 54.5vw; color: rgba(255,0,0,0.9); line-height: .77; margin-left: 50px; } }
JAVASCRIPT
Expand for more options Login