<div class="frame frame--sticker" data-snip-rule="53">
	<div class="shader" data-snip-rule="131"><img src="https://picsum.photos/801/1201" alt="The dashboard of a vintage car" data-snip-rule="158">
		<div class="shader__layer specular" data-snip-rule="159">
			<div class="shader__layer mask" data-snip-rule="165"></div>
		</div>
	</div>
</div>
.frame {
	position: relative;
	margin: 25px auto;
	max-width: 830px;
	border: 20px solid #fff;
}
.shader {
	backface-visibility: hidden;
	position: relative;
	display: block;
	overflow: hidden;
}

.shader__layer {
	background: black;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center;
}

.mask {
	mix-blend-mode: multiply;
	background-image: url(https://picsum.photos/801/1201);
}

.frame--sticker .specular {
	z-index: 0;
	background-position: top center;
	background-image: linear-gradient(
		125deg,
		#f09 30%,
		#fc8b00,
		#ff0,
		#00ff8a,
		#00cfff,
		#cc4cfa 70%
	);
}
.specular {
	background-color: #000;
	mix-blend-mode: color-dodge;
	background-attachment: fixed;
}

.frame--sticker .mask {
	background-repeat: no-repeat;
	background-size: 45%;
	background-position: center;
	z-index: 1;
	mix-blend-mode: multiply;
	background-image: url(https://picsum.photos/200/200);
}

.frame--sticker .mask::after {
	content: "";
	background-position: center;
	background-attachment: fixed;
	z-index: 1;
	mix-blend-mode: color-burn;
	background-image: linear-gradient(45deg, #333 40%, #ddd 60%, #333);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.