JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="old-film">
    <img src="https://planetofhotels.com/guide/sites/default/files/styles/paragraph__live_banner__lb_image__1880bp/public/live_banner/Swiss-Alps-3.jpg" width="100%" height="auto" alt=""/>
    <div class="film">
        <div class="effect">
            <div class="grain"></div>
        </div>
    </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/*.old-film .film, 
.old-film .effect, .old-film .grain, 
.old-film *:before, 
.old-film *:after {
    position: absolute;
}*/
.old-film {
    --filmbg: #fff;
    /*height: 500px;*/
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: var(--filmbg);*/
    /*background-image: url(https://planetofhotels.com/guide/sites/default/files/styles/paragraph__live_banner__lb_image__1880bp/public/live_banner/Swiss-Alps-3.jpg);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.5s ease 0s;
    margin: 0;
    
    filter: grayscale(100%);
}
/*.old-film:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 180px 0 var(--filmbg) inset, 0 0 40px 5px var(--filmbg) inset, 0 0 10px 10px var(--filmbg);
}*/
.film, 
.effect {
    position: absolute;
    width: 100%;
    height: 100%;
    /*filter: blur(0.45px) drop-shadow(0 0 0 #fff1);*/
}
.film:after, 
.effect:after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 100px;
    opacity: 0.5;
    animation: film-scratch 0.45s steps(1) infinite;
    background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37%);
}
.effect:after {
    left: 30%;
    animation: effect-scratch 2s infinite;
}
.grain {
    position: absolute;
    width: 100%;
    height: 100%;
}
.grain:after {
    content: '';
    width: 110%;
    height: 110%;
    position: absolute;
    top: -5%;
    left: -5%;
    opacity: .25;
    background-image: repeating-conic-gradient(var(--filmbg) 0%, transparent .00003%, transparent .0005%, transparent .00095%), repeating-conic-gradient(var(--filmbg) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
    animation: grain 0.5s steps(1) infinite;
}
@keyframes...