Row of cds code

5 days ago - by ‧₊˚𖦹Maddie 𝄞₊˚⊹! - Misc - used 26 times

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.

#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: #ef0094;

    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="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name/div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name </div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here”>

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</div>



 <div class="disc">

    <img src="cd cover image here">

  </div>

  <div class="title">Artist - Album Name</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