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!
Comments
Displaying 0 of 0 comments ( View all | Add Comment )