Spinning CD profile Pic

Tags: music; cd; 2000s; physical media; myspace

Description:

Original layout credits: https://layouts.spacehey.com/layout?id=29048

Disc spins on hover.

CHANGE DISC PRINT TIP

To change the disc image (the print on the actual CD), obtain a transparent image of your chosen CD (has to be a square canvas). Then replace the URL which is by default, (https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png) which can be navigated under the first bit of code that says ":root", which has also been labelled "--cd-image". Change the URL within the contained brackets to a direct image hotlink (You can get these from Imgur for example). This should give you your desired disc, when spinning.

Code:

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

/* 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;
}

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 34 comments ( View all | Add Comment )

cherrycola	1752761780 using Report Comment
ashly	1752657297 using xx Report Comment
sal :3c	1752644374 hii um ^_^ the cd is coming out of the wrong side.. idk how to fix it Report Comment
jumpscares	1746870478 i cant put my own picture in it. ive tried everything. please help Report Comment
Pulsarnova	1746190247 using Report Comment
BulletProofAsh	1745900088 I dont know why but i cant replace the image for the cd i tried to resize the image since im trying to do selfish machines ptv album cover and it still isnt working Report Comment lol nvm i figured it out XD by BulletProofAsh; 1745905308; Report Glad u figured it out! Look great! by Raihan Exoticca; 1748888954; Report Glad u figured it out! Loosk great! by Raihan Exoticca; 1748888958; Report
y4nginniez	1745631091 usingggg!! >w< Report Comment
marydagoat XD	1739236460 using!! ^_^ <3 Report Comment
BLEAAAGHHHH_0ZZY	1737656065 rahhh Report Comment
Jackopoly	1736648141 using Report Comment
Zoe_Zombie	1735181941 using xx Report Comment
Scarlet!X3	1731262776 using Report Comment
fr4nk13xxx	1731223724 Using Report Comment
TY$ON	1731027275 using Report Comment
renestar	1729480390 using Report Comment
BAGI PEREIRAO	1725114372 HELP ME ITS NOT WORKING Report Comment Basically what you hace to do is delete ''/* replace with cd image that has transparent background. must be 150px by 150px. /'' and done! ask me for anything by somii*; 1727902314; Report
Nick	1722155273 I can't get it to work, nothings shows up when I hover over it Report Comment
-ˋˏ✄┈𝑆𝑎𝑙ꨄ🍨꩜ .ᐟ	1721362940 Using Report Comment
A	1719190344 using Report Comment
kkersia	1715622433 thx using Report Comment