cd jewel case pfp (Originally created by Valentine aka ugly_val on spacehey)

Name: FriendRewind
Author: FriendRewind

1 month ago — by juicebox — Profile Picture Effects — used 131 times

cd jewel case pfp (Originally created by Valentine aka ugly_val on spacehey) preview

This effect adds a jewel case on ur pfp, and has a spinning disc that slightly pops out when hovering ur cursor over it. You can even use ur own disc make sure it is 150 by 150px I recommend imresizer for resizing the image.

(THIS CODE WAS ALTERED FOR IT TO WORK IN FRIENDREWIND)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>
.profile-pic{
    position:relative !important;
    width:183px;
    overflow:visible !important;
    filter:drop-shadow(0 0 0.25rem gray);
}


.profile-pic::before{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    top:5px;
    left:-20px;

    background-image:url("https://i.ibb.co/S7QPg1rK/Compact-Disc-imresizer.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    z-index:0;

    animation:spin 5s linear infinite;
    transition:left .5s ease;
}

.profile-pic:hover::before{
    left:-75px;
}


.profile-pic::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    url("https://fluorescent-lights.neocities.org/f0rzNHe.png"),
    linear-gradient(
        150deg,
        rgba(255,255,255,.4),
        rgba(255,255,255,.2),
        rgba(255,255,255,.1),
        rgba(255,255,255,.6)
    );

    background-size:contain,cover;
    pointer-

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Profile Picture Effects

« Back to Profile Picture Effects | « All Profile Elements