.lens {
    position: relative;
    display: inline-block;
    --x: -999px;
    --y: -999px;
  }

  .lens img {
    display: block;
  }

  .lens .l {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    --soft: 28px;
    -webkit-mask-image: radial-gradient(circle at var(--x) var(--y),
        #000 calc(var(--r) - var(--soft)), transparent var(--r));
    mask-image: radial-gradient(circle at var(--x) var(--y),
        #000 calc(var(--r) - var(--soft)), transparent var(--r));
  }

  .lens:hover .l {
    opacity: 1;
  }

  @keyframes pixelate {
    0% {
      filter: none;
    }

    20% {
      filter: url(/~cakes/pixelation.svg#p1);
    }

    40% {
      filter: url(/~cakes/pixelation.svg#p2);
    }

    60% {
      filter: url(/~cakes/pixelation.svg#p3);
    }

    80% {
      filter: url(/~cakes/pixelation.svg#p4);
    }

    100% {
      filter: url(/~cakes/pixelation.svg#p6);
    }
  }

  @keyframes unpixelate {
    100% {
      filter: none;
    }

    80% {
      filter: url(/~cakes/pixelation.svg#p1);
    }

    60% {
      filter: url(/~cakes/pixelation.svg#p2);
    }

    40% {
      filter: url(/~cakes/pixelation.svg#p3);
    }

    20% {
      filter: url(/~cakes/pixelation.svg#p4);
    }

    0% {
      filter: url(/~cakes/pixelation.svg#p6);
    }
  }