Spinning CD profile Pic

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-rai ; 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-rai ; 1712335773; Report

Read the instructions that i just updated on the layout post.

by rai-rai ; 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-rai ; 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 yasmin !; 1712450727; Report

oooo... I'll add that to my description of the layout. Thank you?

by rai-rai ; 1714935683; Report

omg I meant to put an ! not a ?

by rai-rai ; 1714935699; Report

ofc, thank u for the code btw it's very cool!!

by yasmin !; 1714945479; Report

I prefer flash cs5 hhahhhaha. Random but relevant. Saw your profile. Add me!

by rai-rai ; 1700140501; Report

hi! i viewed ur profile and it showed up so i was wondering if u could send the code for the one that does work? tyy

by ry; 1687730207; Report

IH SORRY I WAS BUSY AND NT ONLINE FOR A WHILE BUT YEAH I CAN

by ❝ jade / mitzi ´ˎ˗ ❞; 1687927612; Report

ITS OKAY BUT I FIGURED IT OUT NOW

by ry; 1688001167; Report

WHATDHDNF YOU DO TO GET IT TO WORK I can’t figure it outtt

by kayden ☆; 1689475994; Report

Kayden I used this code:

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


-- its from the original creator, https://layouts.spacehey.com/layout?id=29048

by ch3rry ☾ ⋆*･ﾟ:⋆*･ﾟ; 1701489775; Report

yw

by rai-rai ; 1684061781; Report