.shiny {
    position: relative;
    overflow: hidden;
  }

  .shiny::before {
    content: "";
    position: absolute;
    height: 200%;
    width: 120px;
    left: -150%;
    transform: rotate(30deg) translateY(-30%);

    background: linear-gradient(90deg,
        hsla(0, 0%, 100%, 0.0),
        hsla(0, 0%, 100%, 0.01),
        hsla(0, 0%, 100%, 0.1),
        hsla(0, 0%, 100%, 0.01),
        hsla(0, 0%, 100%, 0.0));

  }

  .shiny:hover::before {
    animation: shine 1s linear;
  }

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

    100% {
      left: 150%;
    }
  }