album collection thing

1 week ago - by ⦻ necrochan - Misc - used 127 times

Do you want to showcase you top 13 (or more) albums? then you're in luck because I made a collection thing so you, yes you can easily add to your profile!

i left notes in the code btw, its recommended you delete them after you read them

also please tell me if the code dosent work/ you have questions!

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<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; /* here where it says color you can insert a diffrent color code for the title of your discs */

    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"> /* where it says cover url, you paste the url of ur album cover and where it says artist and album you type in the name of the artist and album, also you can delete these instructions from the code */

  </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>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements