/* whatever container that has this class applied to it */
.shiny {
    position: relative;
    overflow: hidden;
    /* oh look a floating slash what a dumbass */
}

.shiny::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    /* default start on left hidden */
    width: 50%;
    height: 100%;

    /* the slash itself */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);

    /* skew it so its on an angle */
    transform: skewX(-20deg);
}

.shiny:hover::after {
    animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 670%;
    }
}