JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="slider-content">
    <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="effect-block">
        <div class="effect-item">
            <div class="effect-grain"></div>
        </div>
    </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.slider-content {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.5s ease 0s;
    margin: 0;
    
    filter: grayscale(100%);
}

.effect-block, 
.effect-item {
    position: absolute;
    width: 100%;
    height: 100%;
}
.effect-block:after, 
.effect-item: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-item:after {
    left: 30%;
    animation: effect-scratch 2s infinite;
}
.effect-grain {
    position: absolute;
    width: 100%;
    height: 100%;
}
.effect-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 grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-2%, -2%); }
    40% { transform: translate(3%, 3%); }
    50% { transform: translate(-3%, -3%); }
    60% { transform: translate(4%, 4%); }
    70% { transform: translate(-4%, -4%); }
    80% { transform: translate(2%, 2%); }
    90% { transform: translate(-3%, -3%); }
}
@keyframes film-scratch {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    10% { transform: translateX(-1%); }
    20% { transform:...