Создание улучшенных рамок изображения с помощью режима наложения

Демонстрация работы режима наложения, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div id="blend-border">
  <img src="http://thenewcode.com/assets/images/peugot.jpg" alt="HDR Photograph of a battered Peugot car">
</div>

CSS

div#blend-border {
    display: block;
    width: 80%;
    background-color: #FFF;
    margin: 1rem auto;
    background-image: url("http://thenewcode.com/assets/images/masque-24.png");
    background-size: cover;
}
div#blend-border img {
    width: 100%;
    mix-blend-mode: screen;
    height: auto;
}