cd jewel case pfp w/ spinning disc animation

Tags: music, cd, y2k, css, fancy

Description:

cool cd case that overlays the pfp. spinning cd can be replaced with whatever you want.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=29048) -->

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 1073 comments ( View all | Add Comment )

Finn :P	1714043749 using! :33 Report Comment
Mainu	1714034713 using tysm Report Comment
🎵Avery🦇	1713933918 using! Report Comment
snuffe	1713915422 your profile is mega cool, thank u for this layout :9 Report Comment
MettaØn	1713896405 using? Report Comment
XXrettemichXX	1713891146 using Report Comment
BluVinyl	1713866644 Using it. Thanks! Report Comment
✮silly-sam✮	1713850991 USINGGG Report Comment
skullguy	1713845844 Using! Report Comment
kn1fev	1713844827 using!!! :> Report Comment
susunn	1713821480 Using :3 Report Comment
rüzgar	1713811176 USING!! Report Comment
bLaIr3!!!	1713809535 using :P Report Comment
waitingonyou96	1713806507 Using! Report Comment
jellyfizzism > <	1713714002 using!!!!! :33 Report Comment
kodiak	1713711722 using :3 Report Comment
﹒⭐️﹒Kiki+ Ozzie﹒‹𝟹	1713627618 using Report Comment
Freshade	1713626253 Using!!! Report Comment
Gloomy	1713616341 using :))) looks rly cool Report Comment
Eliya	1713611487 Using! :) Report Comment