Compact Disc Collection

Here is the code if you want to build your own CD Collection!

You can use this for any albums or games that come in a jewel case 😄

I heavily edited code from Vinyl Showcase Library Layout created by Jack ☂ & cd jewel case pfp w/ spinning disc animation Layout created by Valentine to create this. Credit goes to them for the orginal code I used ❤️

You will add your covers and titles in the highlighted sections:

  
 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

You can use any image url for the cover. I found mine on Discogs and Bandcamp. To get the URL right click on the image and choose "copy image address". Paste it in the code and you are good to go! You can add or remove discs from your collection buy pasting or deleting the section of code shown in the box above, respectively.

Here is a couple albums to demonstrate what it looks like:

Daft Punk – Discovery

Metallica – ...And Justice For All

Gorillaz – Plastic Beach

Paste the code below into your About Me section to add it to your profile.

I can't wait to see what's in your collections! ⭐

  
<!-- Edit by fullpersonadonut - 
Original (c) Layout created by Jack ☂ (https://layouts.spacehey.com/layout?id=106135) 
& Valentine (https://layouts.spacehey.com/layout?id=29048) -->

<!----- COMPACT DISC COLLECTION ---->

<style>
#disc-collection * {
    all: unset;
  }
 
  #disc-collection {
    all: initial!important;
    width: 100%!important;
    height: 240px!important;
    margin: 30px 0!important;
    display: flex!important;
    flex-direction: row!important;
    position: relative!important;
    margin-left: 2px!important;
  }
 
  #disc-collection .disc {
      all:unset!important;
    perspective: 500px !important;
    width: 20px!important;
    transition: width 0.5s!important;
  }
 
  #disc-collection .disc:hover {
    width: 180px!important;
  }

  #disc-collection img {
      all:unset!important;
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 183px!important;
    height: 180px!important;
    transform: rotateX(0deg) rotateY(5deg)!important;
    transform-style: preserve-3d!important;
    border-radius: 4px!important;
    border: 2px solid rgba(0, 0, 0, 0.1)!important;
    margin-left: 20px!important;
object-fit: cover!important;
  }
 #disc-collection .disc: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;
transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 210px!important;
    height: 183px!important;
    transform: rotateX(0deg) rotateY(5deg)!important;
    transform-style: preserve-3d!important;
    border: 0px solid rgba(0, 0, 0, 0)!important;
object-fit: cover!important;
}
  #disc-collection .disc:hover img {
    transform: rotateX(0deg) rotateY(1deg)!important;
    width: 183px!important;
    height: 180px!important;
    margin-top: -25px!important;
    margin-left: 20px!important;
  }
   #disc-collection .disc:hover:after {
    transform: rotateX(0deg) rotateY(1deg)!important;
    width: 210px!important;
    height: 183px!important;
    margin-top: -25px!important;
  }
  #disc-collection .title {
    color: #000000;
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
  }
 
  #disc-collection .disc:nth-child(n):hover + .title {
    visibility: visible;
  }

</style>
<div id="disc-collection">

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

</div>

2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )