#preview{
    z-index: 1;
    height: 290px;
    width: 290px;
    margin: 0px auto;
}
.card{
    display: grid;
    grid-template-columns: 290px;
    grid-template-rows: 290;
    background: white;
}
.card .wrapper{
    background-image: url('https://i.hizliresim.com/p6gcx5c.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.wrapper .scanner{
    animation-play-state: running;
    z-index: 2;
}

.scanner {
    width: 100%;
    height: 3px;
    background-color: red;
    opacity: 0.7;
    position: relative;
    box-shadow: 0px 0px 8px 10px red;
    top: 50%;
    animation-name: scan;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: pau;
}

@keyframes scan{
    0%{
        box-shadow: 0px 0px 8px 10px red;
        top:50%;
    }
    25%{
        box-shadow: 0px 6px 8px 10px red;
        top:5px;
    }
    75%{
        box-shadow: 0px 6px 8px 10px red;
        top:98%;
    }
}