Untitled

<style>
    body, html {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .fullscreen {
        width: 100%;
        height: 100%;
    }

    .frost-screen {
        object-fit: cover;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        -webkit-mask-image: -webkit-radial-gradient(50% 50%, circle, transparent 40%, black 90%);
        mask-image: radial-gradient(50% 50%, circle, transparent 30%, black 80%);
        mask-position: center, top left;
        mask-repeat: no-repeat, no-repeat;

        background: url("https://previews.123rf.com/images/fotosav/fotosav0809/fotosav080900021/3534444-hoarfrost-the-patterns-made-by-the-frost-on-the-window-hoarfrost-background-.jpg");
        background-size: 50% 50%;
        background-repeat: repeat;
        mix-blend-mode: screen;
        animation: pulse 4s 1 ease-in-out;
    }

    @keyframes pulse {
        0% {
            transform: scale(1.002);
            opacity: 0.1;
        }
        50% {
            transform: scale(1);
            opacity: 0.4;
        }
        100% {
            transform: scale(1.001);
            opacity: 0.99;
        }
    }
</style>

<body>
<img class="fullscreen"
     src="https://cdnb.artstation.com/p/assets/images/images/009/201/921/large/youssef-alioua-scene-64-bit-pcd3d-sm5-2-3-2018-6-19-20-pm.jpg?1517668332"/>

<!--<img class="fullscreen frost-screen"
     src="https://previews.123rf.com/images/vvoennyy/vvoennyy1411/vvoennyy141100456/34152042-hoar-frost-on-window-pane-on-frosty-winter-evening.jpg">-->
<div class="fullscreen frost-screen"></div>

</body>