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

Scarlet!X3	1731262776 using Report Comment
frank iero	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
Jimmy enjoyer	1721362940 Using Report Comment
A	1719190344 using Report Comment
kkersia	1715622433 thx using Report Comment
Valen	1712438880 Using! Report Comment
击 jaime!!	1711900018 what would i have to change to adjust the size of the cd disc?? is it not possible? i've been trying different things to make it smaller (i want to put my own disc) but i'm still not sure how Report Comment same you know... Try someone else's, I think mine doesn't work for EVERYONE, cuz... you know... different cascading styling codes. Hopefully it works out for you tho. by rai_Blogz08; 1712335556; Report FOUND THE ISSUE! Replace the https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png URL with your transparent cd label image. by rai_Blogz08; 1712335773; Report Read the instructions that i just updated on the layout post. by rai_Blogz08; 1712336293; Report 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. by rai_Blogz08; 1712336302; Report i did do that, but now i see what i did wrong. i was replacing the cd with images way higher than 150x150px. it enlargened my cd disc and cut off most off it, sorry, my mistake! thank you though! by 击 jaime!!; 1712450727; Report oooo... I'll add that to my description of the layout. Thank you? by rai_Blogz08; 1714935683; Report omg I meant to put an ! not a ? by rai_Blogz08; 1714935699; Report ofc, thank u for the code btw it's very cool!! by 击 jaime!!; 1714945479; Report yw Jamie by rai_Blogz08; 1718375859; Report
gigi	1710574349 using!! Report Comment
✎︎＿＿randal :3	1710464271 Using X3 Report Comment
☆Harvey ☆	1709175921 using Report Comment
yellswsmari	1708765361 Using! Report Comment
★Sake★	1703076819 Using!! Report Comment
KXVS	1702978761 USING Report Comment
ELLIOT ⸸	1700397282 using Report Comment
THEO	1698894190 uzing!!! Report Comment