← Back to Layouts
cd

Name: FriendRewind
Author: FriendRewind
Author: ella 🪼⋆.ೃ࿔*:･
Category: :D
Created: August 21, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
#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%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here%E2%80%9D&gt;%0D%0A%0D%0A%20%20&lt;/div&gt;%0D%0A%0D%0A%20%20&lt;div%20class=" title>Artist - Album Name</div>



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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



 <div class="disc">

    <img src="cd%20cover%20image%20here">

  </div>

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

  </div></div>