LAYERED
POSTER
Two dot-pattern masks perforate the photo, a fine mesh from the media's own mask, bigger circles from the after layer's, which also carries a black overlay blend, tinting the whole thing a deep purple.
Code
<style>
.layered-poster {
--steam-block-media-aspect-ratio: 5 / 4;
--steam-block-border-radius: 2rem;
--steam-block-hero-align-items: flex-end;
--steam-block-content-text-align: right;
--steam-block-content-transform: rotate(45deg);
--steam-block-background: linear-gradient(135deg, #ffffff, #000000, #dfdbe9);
--steam-block-media-after-background: #57ce51;
--steam-block-media-after-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
--steam-block-media-after-blend-mode: overlay;
--steam-block-media-mask: url("dots.svg") 0 0/140px 140px repeat;
}
</style>
<steam-block class="layered-poster" type="hero">
<img slot="media" src="photo.jpg" alt="">
<div slot="content"><h1>Layered poster</h1></div>
</steam-block>