PFP Glitch Out on Hover Layout

I found this code by Valentine in which they make your profile picture have a spinning CD that rolls out when hovered. I stole the foundations to make this PFP glitch code. (try hovering over my profile picture in the top left!!)

Note: part of the effect on my profile picture is removing a filter. Right now, all profile pictures on my page have a filter. On hovering, this filter is removed. If you do not have this filter, the effect will be different. You could try applying a filter on hover instead! I don't know coding, so there are definitely better ways to apply a color filter over all profile pictures, I just wouldn't know.

The following is the filter code. You can change the color by changing 

hue-rotate(###deg)

To have a filter that is removed when the profile picture is hovered:

---

<style>

/* Apply the filter to all img elements */

img {

  filter: sepia(100%) hue-rotate(179deg) saturate(1.99);

}

/* Remove the filter when an image with the .pfp-fallback class is hovered */

img.pfp-fallback:hover {

  filter: none;

}

</style>

---

To only have a filter when the profile picture is hovered:

---

<style>

/* Remove the filter when an image with the .pfp-fallback class is hovered */

img.pfp-fallback:hover {

  filter: sepia(100%) hue-rotate(179deg) saturate(1.99);

}

</style>

---

With that out of the way, here is the PFP glitch code:

---

<style>

.profile-pic {

  width: 150px;

  height: 150px;

  position: relative;

  overflow: hidden;

  animation: frame-movement 1s infinite paused, vhs-glitch 0.5s infinite paused;

}

.profile-pic:hover {

  animation-play-state: running;

}

.profile-pic:hover::before,

.profile-pic:hover::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}

.profile-pic::before {

  background: repeating-linear-gradient(

    0deg,

    rgba(255, 0, 255, 0.2) 0%, /* Pink line */

    rgba(0, 255, 255, 0.2) 10%, /* Cyan line */

    transparent 20% /* Space between lines */

  );

  opacity: 0.8;

animation: glitch-lines 0.5s infinite;

}

.profile-pic::after {

  background: rgba(255, 255, 255, 0.05) ;

animation: glitch-bars 0.5s infinite alternate;

}

@keyframes frame-movement {

  0% {

    transform: translate(2.5, -5);

  }

  50% {

    transform: translate(-3px, 3px);

  }

  100% {

    transform: translate(4px, 1px);

  }

}

@keyframes vhs-glitch {

  0% {

    filter: hue-rotate(10deg) brightness(110%) contrast(120%);

  }

  50% {

    filter: hue-rotate(-10deg) brightness(100%) contrast(130%);

  }

  100% {

    filter: hue-rotate(10deg) brightness(90%) contrast(100%);

  }

}

@keyframes glitch-lines {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(3px);

  }

  100% {

    transform: translateY(1px);

  }

}

@keyframes glitch-bars {

  0% {

    transform: translateY(0);

    opacity: 0.3;

  }

  50% {

    transform: translateY(5px);

    opacity: 0.1;

  }

  100% {

    transform: translateY(-5px);

    opacity: 0.2;

  }

}

</style>

---

Have fun pookies!