<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.