<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.