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;
}
}
