rai-rai 😎's profile picture

Layout published by rai-rai

published
updated

Add to Favorites

View Layouts

View Profile

Report Layout

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.

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

A

A's profile picture

using


Report Comment

kkersia

kkersia's profile picture

thx using


Report Comment

Valen

Valen's profile picture

Using!


Report Comment

击 jaime!!

击 jaime!!'s profile picture

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

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

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

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

by rai-rai ; ; Report

omg I meant to put an ! not a ?

by rai-rai ; ; Report

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

by 击 jaime!!; ; Report

yw Jamie

by rai-rai ; ; Report

reii

reii's profile picture

using!!


Report Comment

✎︎__randal :3

✎︎__randal :3's profile picture

Using X3


Report Comment

☆Harvey ☆

 ☆Harvey ☆'s profile picture

using


Report Comment

yellswsmari

yellswsmari's profile picture

Using!


Report Comment

★Sake★

★Sake★'s profile picture

Using!!


Report Comment

KXVS

KXVS's profile picture

USING


Report Comment

ELLIOT ⸸

ELLIOT ⸸'s profile picture

using


Report Comment

THEO

THEO's profile picture

uzing!!!


Report Comment

dreamy ★

dreamy ★'s profile picture

ohh this seems fun, def gonna use it!


Report Comment

𖦹 jade . . .

𖦹 jade . . .'s profile picture

it doesnt work for mine and idk why :( when i hover over my pfp it doesnt show up


Report Comment



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

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

by 𖦹 jade . . .; ; Report

ITS OKAY BUT I FIGURED IT OUT NOW

by ry; ; Report

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

by kayden ☆; ; 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 🍒; ; Report

김산지

김산지's profile picture

thnks, using!!


Report Comment



yw

by rai-rai ; ; Report